Component

Alert

Contextual message for informational, success, warning, or error states. Supports an optional dismiss control.

Usage

Use alerts to surface important messages inline. Choose the variant that matches the message severity.

Playground

Preview

Configure

Yes

Code

const [open, setOpen] = useState(true)

{open && (
  <Alert>
  <AlertIcon>
    <Info weight="bold" aria-hidden />
  </AlertIcon>
  <AlertContent>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
  </AlertContent>
  <AlertDismiss onClick={() => setOpen(false)} />
</Alert>
)}

Do

  • Match variant to severity: info for neutral, warning for caution, destructive for errors
  • Keep the message concise, one sentence title, one or two sentence description
  • Use AlertDismiss for dismissible alerts and remove the alert from the DOM on dismiss

Don't

  • Don't use alerts for success confirmations after actions, use a toast instead
  • Don't stack multiple alerts, consolidate into one or use a list
  • Don't hide critical errors behind dismiss without another way to recover the message