Alert
Displays a callout for user attention.
Demo
Heads up!
You may want to think closely about this next decision.
import { Alert, AlertDescription, AlertTitle } from '@immit/ui/alert'
import { Terminal } from 'lucide-react'
export function AlertDemo() {
return (
<Alert className="flex gap-3">
<Terminal className="size-4" />
<div>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You may want to think closely about this next decision.
</AlertDescription>
</div>
</Alert>
)
}Variants
Heads up!
You may want to think closely about this next decision.
Heads up!
You may want to think closely about this next decision.
import { Alert, AlertDescription, AlertTitle } from '@immit/ui/alert'
import { Terminal } from 'lucide-react'
export function AlertVariants() {
return (
<div className="space-y-2">
<Alert variant="default" className="flex gap-3">
<Terminal className="size-4" />
<div>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You may want to think closely about this next decision.
</AlertDescription>
</div>
</Alert>
<Alert variant="destructive" className="flex gap-3">
<Terminal className="size-4" />
<div>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You may want to think closely about this next decision.
</AlertDescription>
</div>
</Alert>
</div>
)
}