ComponentsAlert

Alert

Displays a callout for user attention.


Demo

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

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>
  )
}