Alert

Displays contextual feedback messages.

Variants

Use the variant prop to communicate the nature of the message.

Default

A neutral message with no specific status.

Info

Here is some information you might find useful.

Success

Your changes have been saved successfully.

Warning

This action may have unintended consequences.

Error

Something went wrong. Please try again.

<Alert variant="default">
<AlertTitle>Default</AlertTitle>
<AlertDescription>A neutral message with no specific status.</AlertDescription>
</Alert>

<Alert variant="info">
<AlertTitle>Info</AlertTitle>
<AlertDescription>Here is some information you might find useful.</AlertDescription>
</Alert>

<Alert variant="success">
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

<Alert variant="warning">
<AlertTitle>Warning</AlertTitle>
<AlertDescription>This action may have unintended consequences.</AlertDescription>
</Alert>

<Alert variant="error">
<AlertTitle>Error</AlertTitle>
<AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>

With icon

Pass any React node to the icon prop to render it to the left of the content.

Saved

Your profile has been updated.

Failed

Unable to connect to the server.

<Alert
variant="success"
icon={
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
    <polyline points="22 4 12 14.01 9 11.01" />
  </svg>
}
>
<AlertTitle>Saved</AlertTitle>
<AlertDescription>Your profile has been updated.</AlertDescription>
</Alert>

Props

Alert

Prop	Type	Default	Description
`variant`	`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'default'`	Color style conveying the message type
`icon`	`ReactNode`	—	Optional icon rendered to the left of the content
`className`	`string`	—	Additional Tailwind classes

AlertTitle

Prop	Type	Default	Description
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Title text

AlertDescription

Prop	Type	Default	Description
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Description text