BRAID
Braid Logo
 

Alert

An Alert is a conditional message provided in response to user action or system activity, and presented in the context of the user flow.
Open in Playroom

Accessibility

Follows the WAI-ARIA Alert Pattern, announcing messages with a polite level of importance.

Choosing a tone

Use the tone property to help communicate the meaning behind the Alert. Alerts support promote, info, positive, caution and critcal tones.Read more about Tones.

Formatting your message

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 Alerts.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

Contextual design

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

Dismissable alerts

An Alert can be made dismissable by providing an onClose handler.Translation hintThe aria-label for the close button can be customised via the closeLabel prop.
Open in Playroom

When to use

Use an Alert if your message:
  • relates to an important condition, status or system change
  • sits at the page or section level and is relevant to the user’s current task.
Don’t use an Alert if your message:
  • needs to be permanently on the screen (use plain Text instead)
  • sits within a section, card, or bounded box such as a widget (use a Notice instead)
  • needs to acknowledge a user action without interrupting their flow (use a Toast instead).

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

Content guidelines

  • Write Alerts as short phrases or sentences. The key is to let the user know the information they need, and the actions they need to take, in a clear and concise way.
  • Using a CTA is optional, depending on whether you want the user to take an action or not.
  • There’s no need to add a full stop on a short sentence or phrase. Include full stops for full sentences.
  • Don’t use headings for Alerts.

Alternatives

  • Notice — For messages that sit within a section, card, or widget; or for a lighter visual treatment.
  • useToast — To acknowledges a user action without interrupting their flow.