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>
<Terminal />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You may want to think closely about this next decision.
</AlertDescription>
</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">
<Terminal />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You may want to think closely about this next decision.
</AlertDescription>
</Alert>
<Alert variant="destructive">
<Terminal />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You may want to think closely about this next decision.
</AlertDescription>
</Alert>
</div>
)
}
With action
Update available
A new version is ready to install.
import {
Alert,
AlertAction,
AlertDescription,
AlertTitle
} from '@immit/ui/alert'
import { Button } from '@immit/ui/button'
import { Terminal } from 'lucide-react'
export function AlertWithAction() {
return (
<Alert>
<Terminal />
<AlertTitle>Update available</AlertTitle>
<AlertDescription>A new version is ready to install.</AlertDescription>
<AlertAction>
<Button size="sm" variant="outline">
Install
</Button>
</AlertAction>
</Alert>
)
}