Alert

Dismissible container for escalated messages

Demo

API

Tag

Name Type Content
m-alert Custom Element Any

Attributes

Name Value Description
type required
  • info
  • success
  • warn
  • error
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 Boolean attribute or Number If present, the Alert will automatically remove itself after 4 seconds. To increase or decrease the duration, set its value to the desired number of seconds.
dismissible
  • true default
  • false
When set to "false" the dismiss button will not be displayed so the user can't dismiss the Alert. The application can still directly remove the Alert from the DOM or call its dismiss method. autodismiss is also still effective.

Events

Name Detail Description
dismiss None Fires after Alert has been dismissed. This happens when the user clicks the dismiss button or after auto-dismiss or the application calls dismiss().

Methods

Signature Description
dismiss() Can be used to programmatically remove the Alert.

Guidelines

Alert vs. Dialog

Some information is so important it justifies interrupting the user experience, so for those cases consider displaying it in a Dialog instead of Alert.

Accessibility

When type is "warn" or "error" the ARIA alert role will be added automatically.