BRAID
Braid Logo
 

Alert

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.

Content guidelines

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.
Open in Playroom

Dismissable alerts

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.
Open in Playroom

Contextual design

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

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Alert
  data={{ testid: 'alert-1' }}
  // => data-testid="alert-1"
>
  ...
</Alert>
Open in Playroom