• Notice For a lighter visual treatment.
  • useToast For asynchronous messages that float above the page.
Follows the WAI-ARIA Alert Pattern, announcing messages with a polite level of importance.
An Alert can contain layout components such as Stack and Inline, as well as typographic components such as Text, TextLink and List. We do not recommend using Button elements inside of message.
This component has only been designed to use standard size text. Any other size of text will break the alignment with the icon.
An Alert can be made dismissable by providing an onClose handler.
Translation hint The aria-label for the close button can be customised via the closeLabel prop.
When an Alert is used on a surface background colour, i.e. in a Card, the outline is omitted.