Best practices

• The Alert component should be used contextually near a set of related controls (for example, within a form); a Notification is better suited for broadcast messages

Types

There are two alert types currently.

AlertType.Info should be used for guidance to help a user perform an action.

AlertType.Error should be used to inform a user in response to an action that was not completed successfully.

Editable example
<Alert heading="User error" alertType={AlertType.Error}>
  Your changes were unable to be saved. Please re-save, or try again later.
</Alert>
<Alert heading="Top tip" alertType={AlertType.Info}>
  You can edit the text color of links by hovering over the link and clicking the rainbow brush.
</Alert>
<Alert heading="User error" alertType={AlertType.Error}>
  Your changes were unable to be saved. Please re-save, or try again later.
</Alert>
<Alert heading="Top tip" alertType={AlertType.Info}>
  You can edit the text color of links by hovering over the link and clicking the rainbow brush.
</Alert>

Alignment

By default, the heading and body are left-aligned.

Use AlignmentType.Center within alerts with narrow widths, or with alerts that sit in context of other center aligned elements

Editable example
<Card>
  <div className="space-inset-m" style={{display: "flex", flexDirection: "column", alignItems: "center"}}>
    <div className="text-h3 space-stack-m">Customisable settings with centred content</div>
      {[1,2,3].map(i => (<div className="text-h4">Setting {i}</div>))}
    <Alert heading="Top tip" alignment={AlertAlignment.Center}>
      This alert is centred to match the center-alignment of the outer content.
    </Alert>
  </div>
</Card>
<Card>
  <div className="space-inset-m" style={{display: "flex", flexDirection: "column", alignItems: "center"}}>
    <div className="text-h3 space-stack-m">Customisable settings with centred content</div>
      {[1,2,3].map(i => (<div className="text-h4">Setting {i}</div>))}
    <Alert heading="Top tip" alignment={AlertAlignment.Center}>
      This alert is centred to match the center-alignment of the outer content.
    </Alert>
  </div>
</Card>

Theming

The Alert component supports theming via the theme prop. By default it will use AlertTheme.Light, but you can also provide AlertTheme.Dark for a darker theme.

Editable example
<Alert heading="This is an alert with the dark theme" theme={AlertTheme.Dark}>
  <p>Click & drag saved blocks from your Library to drop them into your page and add content easily.</p>
</Alert>
<Alert heading="This is an alert with the dark theme" theme={AlertTheme.Dark}>
  <p>Click & drag saved blocks from your Library to drop them into your page and add content easily.</p>
</Alert>

Note that the dark theme doesn't work with AlertType.Error right now.

Dismissable alert

If you want a dismissable alert, you can pass a function as the onDismiss prop. This will add a dismiss button to the top right hand corner of the component.

Editable example
<Alert heading="This is an alert with the dark theme" theme={AlertTheme.Dark} onDismiss={() => alert("You dismissed this alert")}>
  <p>Click & drag saved blocks from your Library to drop them into your page and add content easily.</p>
</Alert>
<Alert heading="This is an alert with the dark theme" theme={AlertTheme.Dark} onDismiss={() => alert("You dismissed this alert")}>
  <p>Click & drag saved blocks from your Library to drop them into your page and add content easily.</p>
</Alert>

Accessibility

AlertType.Error applies the ARIA 'alert' role, so be considerate to only use when immediate attention is required.