Alert

Heads up!

You can add components to your app using the CLI.

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

Installation

npx bearnie add alert

import Alert from "@/components/ui/alert/Alert.astro";
import AlertTitle from "@/components/ui/alert/AlertTitle.astro";
import AlertDescription from "@/components/ui/alert/AlertDescription.astro";

Usage

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

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

Examples

Destructive

Error

Your session has expired. Please log in again.

<Alert variant="destructive">
<CircleX class="size-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>

Success

Your changes have been saved successfully.

<Alert variant="success">
<CircleCheck class="size-4" />
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

Warning

Your account is about to expire.

<Alert variant="warning">
<TriangleAlert class="size-4" />
<AlertTitle>Warning</AlertTitle>
<AlertDescription>Your account is about to expire.</AlertDescription>
</Alert>

Info

A new version is available for download.

<Alert variant="info">
<Info class="size-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription>A new version is available for download.</AlertDescription>
</Alert>

Anatomy

Alert - The root container with variant styling
AlertTitle - The heading text
AlertDescription - The descriptive content

Props

Prop	Type	Default	Description
variant	default \| destructive \| success \| warning \| info	default	Visual style variant
class	string	-	Additional CSS classes

AlertTitle

Prop	Type	Default	Description
class	string	-	Additional CSS classes

AlertDescription

Prop	Type	Default	Description
class	string	-	Additional CSS classes