Skip to content
Sancho UI
Toggle dark mode
Getting started
Components
Helpers
Built with ☕ by
Ben McMahen

Alert

Use an alert to inform users of important information. To display an alert in a toast notification, use the useToast hook. This component takes its inspiration from the excellent version found in Evergreen.

Basic usage

Nostrud non magna quis veniam dolore magna voluptate.
<Alert title="Nostrud non magna quis veniam dolore magna voluptate." />

With a subtitle

Nostrud non magna quis veniam dolore magna voluptate.
Nulla id amet reprehenderit laboris irure Lorem ex esse eiusmod eiusmod occaecat officia. Quis in reprehenderit dolor veniam id sunt mollit reprehenderit.
<Alert
  title="Nostrud non magna quis veniam dolore magna voluptate."
  subtitle="Nulla id amet reprehenderit laboris irure Lorem ex esse eiusmod eiusmod occaecat officia. Quis in reprehenderit dolor veniam id sunt mollit reprehenderit."
/>

Intent

You can alter the colors and icons of the Alert by changing the intent prop to either info, success, question, danger, or warning.

Nostrud non magna quis veniam dolore magna voluptate.
Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim.
Nostrud non magna quis veniam dolore magna voluptate.
Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim.
Nostrud non magna quis veniam dolore magna voluptate.
Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim.
Nostrud non magna quis veniam dolore magna voluptate.
Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim.
Nostrud non magna quis veniam dolore magna voluptate.
Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim.
<div className="Alert-example">
  <Alert
    intent="info"
    title="Nostrud non magna quis veniam dolore magna voluptate."
    subtitle="Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim."
  />
  <Alert
    intent="success"
    title="Nostrud non magna quis veniam dolore magna voluptate."
    subtitle="Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim."
  />
  <Alert
    intent="question"
    title="Nostrud non magna quis veniam dolore magna voluptate."
    subtitle="Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim."
  />
  <Alert
    intent="danger"
    title="Nostrud non magna quis veniam dolore magna voluptate."
    subtitle="Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim."
  />
  <Alert
    intent="warning"
    title="Nostrud non magna quis veniam dolore magna voluptate."
    subtitle="Ut ut eiusmod ad cillum ad magna cillum non esse labore exercitation qui minim minim."
  />
</div>

API

Alert
onRequestClose() => void
If used, a close button will be attached to the alert box.
titlestring
Primary text
subtitleReactNode
Secondary text
idstring
A unique id used for accessibility purposes
elevationLayerElevations
childrenReactNode
Optionally render children if a title is not specified. Used for custom alerts.
intentAlertIntentions
Changes the icon and colour of the alert.
componentReactType<any>
type"polite" | "assertive"
cssInterpolationWithTheme<any>