Alert

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-ember/alert
Copy

Usage#

Copyimport {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/ui/alert';

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

Composition#

Use the following composition to build an Alert:

CopyAlert
├── Icon
├── AlertTitle
└── AlertDescription

Examples#

Basic#

A basic alert with an icon, title and description.

Destructive#

Use @variant="destructive" to create a destructive alert.

Status Variants#

Use @variant="warning", @variant="success", or @variant="info" for semantic status alerts.

Custom Colors#

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

API Reference#

Alert#

The Alert component displays a callout for user attention.

AlertTitle#

The AlertTitle component displays the title of the alert.

AlertDescription#

The AlertDescription component displays the description or content of the alert.