Usage

While notices are an effective method of communicating with users, they can be disruptive and should be used sparingly.

<Notice>By default a notice will be of "informative" tone</Notice>

Title

You may provide an optional title property.

Edit in Playroom

<Notice title="Notice title">
  You may provide an optional "title" property.
</Notice>

Actions

Actions provide an opportunity for the user to act on the information they have read in the notice.

Edit in Playroom

<Notice
  title="Actions"
  actions={{
    primary: { label: 'Primary action', action: console.log },
    secondary: { label: 'Secondary action', action: console.log },
  }}
>
  Actions provide an opportunity for the user to act on the information they
  have read in the notice.
</Notice>

Navigations can be performed through the action by using window.location or a client router. For navigations that take the user to a new tab, the externalLink prop can be used.

Edit in Playroom

<Notice
  title="External navigation"
  actions={{
    primary: {
      label: 'Go somewhere',
      action: console.log,
      externalLink: true,
    },
  }}
>
  Actions can also navigate the user somewhere.
</Notice>

Sizes

Notices are available in the following sizes.

Edit in Playroom

<Stack gap="small">
  <Notice size="small">
    The small size should be used for data-dense interfaces that have limited
    real estate available.
  </Notice>
  <Notice size="medium">
    The medium size should be used for most cases, since the purpose of the
    notice is to draw attention.
  </Notice>
</Stack>

Tones

Notices are available in a variety of tones for different situations.

Edit in Playroom

<Stack gap="small">
  <Notice tone="informative" title="Informative">
    Information needs to be communicated to the user.
  </Notice>
  <Notice tone="critical" title="Critical">
    An error has occurred, here's feedback on how to proceed.
  </Notice>
  <Notice tone="cautious" title="Cautious">
    The user should be aware and possibly exercise caution.
  </Notice>
  <Notice tone="positive" title="Positive">
    Celebrate the successful outcome of an event or action.
  </Notice>
</Stack>

Icon

You may provide a custom icon using the "icon" property.

The default icons are appropriate for the "tone" and provide context for users that aren't able to discern intent from colour alone. To maintain continuity within our products we recommend that this is rarely used.

Edit in Playroom

<Notice icon={LockIcon}>This period is closed, editing is locked.</Notice>