Alert

Displays a callout for important content.

Heads up!

You can add components to your app using the CLI.

variant

default

destructive

#Installation

bunx --bun barefoot add alert

#Usage

Heads up!

You can add components to your app using the CLI.

1import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'23function AlertDemo() {4  return (5    <Alert>6      <TerminalIcon />7      <AlertTitle>Heads up!</AlertTitle>8      <AlertDescription>9        You can add components to your app using the CLI.10      </AlertDescription>11    </Alert>12  )13}

#Examples

#Default

Heads up!

You can add components to your app using the CLI.

<Alert>
  <TerminalIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

#Destructive

Error

Your session has expired. Please log in again.

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

#API Reference

Alert

Prop	Type	Default	Description
variant	'default' \| 'destructive'	'default'	The visual style of the alert.
children	Child	-	The content of the alert (typically an SVG icon, AlertTitle, and AlertDescription).

AlertTitle

Prop	Type	Default	Description
children	Child	-	The title text of the alert.

AlertDescription

Prop	Type	Default	Description
children	Child	-	The description text of the alert.