Alert

Figma

A prominent message that draws user attention to important information.

Preview
Source

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>

 bunx bejamas add alert

 npx bejamas add alert

 pnpm dlx bejamas add alert

 yarn dlx bejamas add alert

---
/**
 * @component Alert
 * @title Alert
 * @description A prominent message that draws user attention to important information.
 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2536-3189&t=YFStJ3V8fXEO8QD8-4
 *
 * @preview
 *
 * <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>
 *
 * @usage
 *
 * ```astro
 * ---
 * 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>
 * ```
 */
import { cva } from "class-variance-authority";
import { cn } from "@bejamas/ui/lib/utils";
import type { HTMLAttributes, HTMLTag } from "astro/types";

type AlertVariant = "default" | "destructive";

type Props = {
  as?: HTMLTag;
  variant?: AlertVariant;
  class?: string;
} & HTMLAttributes<"div">;

const {
  as: Tag = "div",
  class: className = "",
  variant = "default",
  ...rest
} = Astro.props as Props;

const alertVariants = cva(
  "relative w-full rounded-xl border border-border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);
---

<Tag
  {...rest}
  data-slot="alert"
  role="alert"
  class={cn(alertVariants({ variant }), className)}
>
  <slot />
</Tag>

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>