Components

Alert

Callout banner in five sentiment variants — tinted container + border with a matching leading icon; text stays on-surface. fullWidth drops the border/radius for edge-to-edge banners.

View in Figma
Scheduled maintenance
The portal will be unavailable Sunday from 2–4 AM.
<Alert title="Scheduled maintenance">
  The portal will be unavailable Sunday from 2–4 AM.
</Alert>
Request submitted
You'll get an email when it's approved.
<Alert sentiment="success" title="Request submitted">
  You'll get an email when it's approved.
</Alert>
New in this release
Requests can now be duplicated from the row menu.
<Alert sentiment="info" title="New in this release">
  Requests can now be duplicated from the row menu.
</Alert>
<Alert sentiment="warning" title="Session expiring">
  Your session will expire in 5 minutes.
</Alert>
<Alert sentiment="error" title="Couldn't save changes">
  Check the highlighted fields and try again.
</Alert>
<Alert sentiment="error" showTitle={false}>
  Access denied.
</Alert>
Scheduled maintenance
The portal will be unavailable Sunday from 2–4 AM.
<Alert fullWidth title="Scheduled maintenance">
  The portal will be unavailable Sunday from 2–4 AM.
</Alert>
<Alert fullWidth sentiment="error" title="Couldn't save changes">
  Check the highlighted fields and try again.
</Alert>
Props
sentiment:"general" | "success" | "info" | "warning" | "error"= "general"
Variant — drives the container fill, border, and leading icon.
fullWidth:boolean= false
Edge-to-edge banner — drops the border and radius, widens horizontal padding.
title:ReactNode= "Title"
Bold heading; hidden when showTitle is false.
showTitle:boolean= true
Toggle the title line.
children:ReactNode
Description / body content.
Tokens