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>
      <Terminal />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You may want to think closely about this next decision.
      </AlertDescription>
    </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">
        <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

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