An alert component for displaying important information to users with different severity levels.

Import

Code
 
import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";

Components

The Alert component consists of several sub-components:

• Alert - The main container
• AlertTitle - Title for the alert
• AlertDescription - Description content for the alert

Default Alert

Alert
 
<Alert>
  <TerminalIcon className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Destructive Alert

Code
 
<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>

Without Title

Code
 
<Alert>
  <TerminalIcon className="h-4 w-4" />
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Without Icon

Code
 
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Usage Examples

Success Alert

Code
 
<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
  <CheckCircle2Icon className="h-4 w-4" />
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

Warning Alert

Code
 
<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
  <AlertTitle>Warning!</AlertTitle>
  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
</Alert>

Props