Alert

Success! Your changes have been saved

This is an alert with title and description.

This Alert has a title and an icon. No description.

Unable to process your payment.

Please verify your billing information and try again.

• Check your card details
• Ensure sufficient funds
• Verify billing address

---
import { CircleCheckIcon } from '@lucide/astro';

import { Alert, AlertDescription, AlertTitle } from '@bejamas/ui/components/alert';
---

<div class="grid w-full max-w-xl items-start gap-4">
  <Alert>
    <CircleCheckIcon size={32} />
    <AlertTitle>Success! Your changes have been saved</AlertTitle>
    <AlertDescription>This is an alert with title and description.</AlertDescription>
  </Alert>

  <Alert>
    <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
  </Alert>

  <Alert variant="destructive">
    <AlertTitle>Unable to process your payment.</AlertTitle>
    <AlertDescription>
      <p>Please verify your billing information and try again.</p>
      <ul class="list-inside list-disc text-sm">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </AlertDescription>
  </Alert>
</div>

View CodeHide Code

Installation

bun

bunx bejamas add alert

npm

npx bejamas add alert

pnpm

pnpm dlx bejamas add alert

yarn

yarn dlx bejamas add alert

Usage

---
import { Alert, AlertTitle, AlertDescription } from '@bejamas/ui/components/alert';
---
<Alert variant="default">
  <CircleCheckIcon size={32} />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>Something happened successfully.</AlertDescription>
</Alert>

Props

Prop	Type	Default
variant	AlertVariant	"default"
class	string	""