Alert

Displays a callout for user attention.

Installation

›pnpm dlx shadcn@latest add @evolphin/alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

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

Type Definitions

interface AlertProps {
  /** The visual style of the alert */
  variant?: "default" | "destructive";   
AlertProps.variant?: "default" | "destructive" | undefined
The visual style of the alert
}

Examples

Default

Heads up!

You can add components to your app using the cli.

Destructive

Use for critical errors or warnings.

Error

Your session has expired. Please log in again.

API Reference

Alert

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	The visual style of the alert
`className`	`string`	-	Additional CSS classes

AlertTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

AlertDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Accessibility

Role: alert role is applied to the root element.

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Aspect Ratio

Displays content within a desired ratio.

On this page

Type Definitions

AlertDescription