Alert

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 from '@bejamas/ui/components/Alert.astro';
---

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

  <Alert>
    <Alert part="title">This Alert has a title and an icon. No description.</Alert>
  </Alert>

  <Alert variant="destructive">
    <Alert part="title">Unable to process your payment.</Alert>
    <Alert part="description">
      <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>
    </Alert>
  </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.
 *
 * @preview
 *
 * <div class="grid w-full max-w-xl items-start gap-4">
 *   <Alert>
 *     <CircleCheckIcon size={32} />
 *     <Alert part="title">Success! Your changes have been saved</Alert>
 *     <Alert part="description">This is an alert with title and description.</Alert>
 *   </Alert>
 *
 *   <Alert>
 *     <Alert part="title">This Alert has a title and an icon. No description.</Alert>
 *   </Alert>
 *
 *   <Alert variant="destructive">
 *     <Alert part="title">Unable to process your payment.</Alert>
 *     <Alert part="description">
 *       <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>
 *     </Alert>
 *   </Alert>
 * </div>
 *
 * @usage
 *
 * ```astro
 * ---
 * import Alert from '@/components/ui/Alert.astro';
 * ---
 * <Alert variant="default">
 *   <CircleCheckIcon size={32} />
 *   <Alert part="title">Heads up!</Alert>
 *   <Alert part="description">Something happened successfully.</Alert>
 * </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 AlertPart = "root" | "title" | "description";

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

type AlertTitleProps = {
  part: "title";
  as?: HTMLTag;
  variant?: never;
  class?: string;
} & HTMLAttributes<"div">;

type AlertDescriptionProps = {
  part: "description";
  as?: HTMLTag;
  variant?: never;
  class?: string;
} & HTMLAttributes<"div">;

type Props = AlertRootProps | AlertTitleProps | AlertDescriptionProps;

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

const part = (rawPart ?? "root") as AlertPart;

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",
    },
  },
);
---

{
  part === "root" && (
    <Tag
      {...rest}
      data-slot="alert"
      role="alert"
      class={cn(
        alertVariants({ variant: (variant as AlertVariant) ?? "default" }),
        className,
      )}
    >
      <slot />
    </Tag>
  )
}

{
  part === "title" && (
    <Tag
      {...rest}
      data-slot="alert-title"
      class={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        className,
      )}
    >
      <slot />
    </Tag>
  )
}

{
  part === "description" && (
    <Tag
      {...rest}
      data-slot="alert-description"
      class={cn(
        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
        className,
      )}
    >
      <slot />
    </Tag>
  )
}

Usage

---
import Alert from '@/components/ui/Alert.astro';
---
<Alert variant="default">
  <CircleCheckIcon size={32} />
  <Alert part="title">Heads up!</Alert>
  <Alert part="description">Something happened successfully.</Alert>
</Alert>