Reddot UI Library

Docs
Alert

Alert

Displays a callout for user attention.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/alert.json

Utilisation

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Terminal } from "lucide-react"
 
export function AlertDemo() {
  return (
    <Alert>
      <Terminal className="h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components and dependencies to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

Variantes

// Alert par défaut
<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>
 
// Alert destructive
<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

API Reference

Alert

PropTypeDefaultDescription
variant"default" | "destructive""default"The variant of the alert

AlertTitle

The title of the alert.

AlertDescription

The description that gives more information about the alert.

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Supporte les icônes pour améliorer la compréhension
  • Deux variantes disponibles : default et destructive