Alert

Preview

Alert Title

This is a default alert message to demonstrate the Alert component.

import { BookmarkIcon } from "@radix-ui/react-icons";
import {
  Alert,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertIcon,
  AlertStatus,
} from "@/components/ui/Alert";

export function AlertDemo() {
  return {
  return (
    <Alert>
      <AlertIcon>
        <BookmarkIcon className="icon" />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Alert Title</AlertTitle>
        <AlertDescription>
          This is a default alert message to demonstrate the Alert component.
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
};

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/alert

Manual

Install the following dependencies:

pnpm install @radix-ui/react-icons class-variance-authority

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Alert component into your components/ui/Alert.tsx file.

/**
 * @description Displays a callout for user attention with contextual feedback messages.
 */
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import {
  CheckCircledIcon,
  CrossCircledIcon,
  ExclamationTriangleIcon,
  InfoCircledIcon,
} from "@radix-ui/react-icons";

import { cn } from "@/utils/class-names";

const alertVariants = cva("flex gap-1 space-y-0.5 p-1 rounded-md border", {
  variants: {
    variant: {
      default: "bg-background text-foreground",
      info: "bg-info text-info-contrast border-info-contrast border border-info-contrast",
      success:
        "bg-success text-success-contrast border-success-contrast border border-success-contrast",
      warning:
        "bg-warning text-warning-contrast border-warning-contrast border border-warning-contrast",
      danger:
        "bg-danger text-danger-contrast border-danger-contrast border border-danger-contrast",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

interface AlertProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof alertVariants> {}

function Alert({ className, variant, ...props }: AlertProps) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  );
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn("font-bold", className)}
      {...props}
    />
  );
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return <div data-slot="alert-description" {...props} />;
}

function AlertContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-content" {...props} />;
}

function AlertIcon({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-icon" {...props} />;
}

// Local AlertStatus component definition
const AlertStatus = ({
  title,
  description,
  status,
  icon,
}: {
  title: string;
  description: string;
  status: "info" | "success" | "danger" | "warning";
  icon?: React.ElementType;
}) => {
  const Icon =
    icon ||
    {
      info: InfoCircledIcon,
      success: CheckCircledIcon,
      warning: ExclamationTriangleIcon,
      danger: CrossCircledIcon,
    }[status];

  return (
    <Alert variant={status}>
      <AlertIcon>
        <Icon className="icon" />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>{title}</AlertTitle>
        <AlertDescription>{description}</AlertDescription>
      </AlertContent>
    </Alert>
  );
};

export {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertIcon,
  AlertContent,
  AlertStatus,
};

Usage

AlertDemo

export const AlertDemo = () => {
  return (
    <Alert>
      <AlertIcon>
        <BookmarkIcon className="icon" />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Dummy Title</AlertTitle>
        <AlertDescription>
          This is a dummy description to demonstrate the Alert component.
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
};

AlertStatusStatusesDemo

export const AlertStatusStatusesDemo = () => {
  return (
    <div className="space-y-0.5">
      <AlertStatus
        title="Dummy Title"
        description="This is a dummy description to demonstrate the Alert component."
        status="info"
      />
      <AlertStatus
        title="Dummy Title"
        description="This is a dummy description to demonstrate the Alert component."
        status="success"
      />
      <AlertStatus
        title="Dummy Title"
        description="This is a dummy description to demonstrate the Alert component."
        status="danger"
      />
      <AlertStatus
        title="Dummy Title"
        description="This is a dummy description to demonstrate the Alert component."
        status="warning"
      />
    </div>
  );
};