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
  • Number of seconds
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
  • false
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".