BRAID
Braid Logo
 

Notice

A Notice 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.Note that the caution tone is not supported because it’s not possible to achieve an accessible contrast ratio while maintining an acceptable semantic colour. For this case, consider using an Alert instead.

Choosing a tone

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

Formatting your message

A Notice 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 Notice.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

When to use

Use a Notice if your message:
  • relates to an important condition, status or system change
  • sits within a section, card, or bounded box and is relevant to the user’s current task.
Don’t use a Notice if your message:
  • needs to be permanently on the screen (use plain Text instead)
  • sits at the page or section level (use an Alert 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.
<Notice
  data={{ testid: 'Notice-1' }}
  // => data-testid="Notice-1"
>
  ...
</Notice>
Open in Playroom

Content guidelines

  • Write Notices 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 Notices.

Alternatives

  • Alert — For page and section level messages, or for a stronger visual treatment.
  • useToast — To acknowledges a user action without interrupting their flow.