Alerts

An Alert shows a short message to the user: a success, an error, a warning or general information. It stays inside the page flow and does not block the rest of the page the way a modal does.

To show alerts as pop-up notifications from your code, use the AlertService. See Notifications.

Examples

HTML:

<Alert body="Default alert" />
<Alert variant="success" body="Data has been submitted successfully" />
<Alert variant="error" body="Some error has occurred" />
<Alert variant="warning" body="File size should not exceed 1MB" />

Action button

Set actionLabel to show a button next to the message, for example "Undo" or "Retry". When the user presses it, the Alert emits the (action) event and closes.

HTML:

<Alert
    variant="success"
    body="The file has been moved to Archive"
    actionLabel="Undo"
    dismissible="false"
    (action)="undoMove"
/>

PHP:

public function undoMove()
{
    // move the file back
}

Properties

Alert

body - sets the text message of the Alert. It is plain text, there is no slot for custom markup.

id - (optional), sets the id of the container.

variant - (optional), sets the variant of the Alert. Available values: success, error, warning, info, or a custom CSS class. Default: ` (empty), looks the same asinfo`.

timeout - (optional), time in milliseconds after which the Alert closes by itself (property show is set to false and (dismiss) is emitted). The timer runs in the browser only. Default: null, no timeout.

show - (optional), sets the visibility of the Alert. Default: true.

dismissible - (optional), shows the close button of the Alert. Default: true.

icon - (optional), the icon name for the Alert. The built-in variants (success, error, warning, info and empty) set their own icon and ignore this value, so use it together with a custom variant. Default: `` (empty), no icon.

actionLabel - (optional), the text of the action button. The button is shown only when this value is not empty. Default: `` (empty).

Events

Alert

(action) - happens when the user presses the action button. The Alert closes right after that, so (dismiss) is emitted too.

(dismiss) - happens when the Alert closes: by the close button, by the action button or when the timeout runs out.