Alerts provide contextual feedback messages for typical user actions.
Loading demo: alert-real-world
npx sdaia-ui@latest add alerts
import { Alert } from "@/components/ui/alert"1<Alert>2<AlertTitle>Title</AlertTitle>3<AlertDescription>Description</AlertDescription>4</Alert>
A basic alert with a title and description.
Loading demo: alert-standard
Use surface="glass" to enable glass effect on Alerts.
Loading demo: alert-glass
Use `type="Outline"` for a bordered alert with no background fill.
Loading demo: alert-outline
Use `type="Solid"` for a high-contrast background. Use sparingly.
Loading demo: alert-solid
Use `state="Neutral"` for a general-purpose message with no semantic colour.
Loading demo: alert-neutral
Use `state="Info"` for hints, tips, or supplementary information.
Loading demo: alert-info
Use `state="Success"` to confirm a completed action or process.
Loading demo: alert-success
Use `state="Warning"` for conditions that may need the user's attention.
Loading demo: alert-warning
Use `state="Error"` for critical problems that must be resolved.
Loading demo: alert-destructive
Props for the Alert component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'standard' | 'outline' | 'solid' | 'standard' | optional |
state | 'neutral' | 'info' | 'error' | 'warning' | 'success' | - | optional |
variant | 'neutral' | 'info' | 'error' | 'warning' | 'success' | deprecated | optional |
title | string | - | optional |
description | string | - | optional |
closable | boolean | false | optional |
onClose | () => void | - | optional |
leadingIcon | ReactNode | boolean | - | optional |
icon | ReactNode | deprecated | optional |
actions | ReactNode | - | optional |
iconTop | boolean | false | optional |
children | ReactNode | - | optional |