Component
Alert
Contextual message for informational, success, warning, or error states. Supports an optional dismiss control.
Installation
Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.
npx shadcn@latest add https://design.ag.org/r/alertUsage
Use alerts to surface important messages inline. Choose the variant that matches the message severity.
Composition
Playground
Preview
Heads up!
You can add components to your app using the CLI.
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>
)}Variants & States
Supported variants, sizes, and interaction states for this component.
Variants
- Default
- Info
- Success
- Warning
- Destructive
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