Skip to main content
Kaleidoscope

Alert

DS
MB

Alerts are used for in-context hints, either to help guide them to an action, or in response to a given action.

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 three alert types:

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

AlertType.Caution should be used to warn a user about a potential issue or consequence before they take 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="Heads up" alertType={AlertType.Caution}>
  Changing this setting will affect all pages using this template.
</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>

Size

Alerts come in three sizes. AlertSize.FullWidth is the default and fills the available width. AlertSize.Medium and AlertSize.Small provide more compact options for tighter contexts.

Editable example
<Alert heading="Full width (default)" size={AlertSize.FullWidth}>
  This alert fills the available width.
</Alert>
<Alert heading="Medium" size={AlertSize.Medium}>
  A medium-width alert.
</Alert>
<Alert heading="Small" size={AlertSize.Small}>
  A compact alert.
</Alert>

Custom icon

Use the icon prop to override the default icon for a given alert type.

Editable example
<Alert heading="Custom icon" icon={<Star />}>
  This alert uses a custom icon.
</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>

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 alert can be dismissed" 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.