Alert

This is a promoted message.

This is an informative message.

This is a positive message.

This is a cautionary message.

This is a critical message.

Open in Playroom

Alternatives

Notice — For a lighter visual treatment.
useToast — For asynchronous messages that float above the page.

Accessibility

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.

This is an informative message with a TextLink.

Bullet 1
Bullet 2
Bullet 3

Open in Playroom

Dismissable alerts

An Alert can be made dismissable by providing an onClose handler. The aria-label for the close button can be customised via the closeLabel prop.

This is an informative message.

Open in Playroom

Contextual design

Only applicable to themes with grey body backgrounds, e.g. apac.

When an Alert is used on a surface background colour, i.e. in a Card, the outline is omitted.

This is a promoted message.

This is an informative message.

This is a positive message.

This is a cautionary message.

This is a critical message.

Open in Playroom

Braid Logo

Alert

Alternatives

Accessibility

Content guidelines

Dismissable alerts

Contextual design