Alert
Dismissible container for escalated messages
Demo
API
Tag
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
m-alert |
Custom Element | Any |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
type required |
|
Sets the type of the message. Error messages should use "error", cautionary messages should use "warn", positive messages should use "success", and important informational messages should use "info". | |||||||
autodismiss |
|
If present, the Alert will automatically remove itself after 4 seconds. To increase or decrease the delay, set its value to the desired number of seconds. | |||||||
dismissible |
|
When set to "false", the dismiss button will not be displayed and the user can't dismiss the alert. The application can still directly remove the alert from the DOM or call dismiss() and autodismiss is also still effective. |
|||||||
icon |
Any icon name | Adds the specified icon. Good pairings for each type are info for info, check_circle for success, warning for warn, and error for error, but use whatever is best for your alert. |
Events
Name | Detail | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
dismiss |
None | Fires after alert has been dismissed. This happens when the user clicks the dismiss button, after autodismiss completes, or when dismiss() is called directly. |
Methods
Signature | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|
dismiss() |
Removes the alert from the DOM and fires dismiss event. |
Guidelines
Alert vs. Dialog
Some information is so important it justifies interrupting the user experience. In those cases consider displaying it in a dialog instead of an alert.
Accessibility
When type
is "warn" or "error" the ARIA alert role will be added automatically. Add aria-label=""
to the dismiss button with something helpful like "Remove confirmation message".