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

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

Props

Prop	Type	Default
All props from	`AlertProps (extends React.ComponentProps<"div">)`	-

AlertTitle

Prop	Type	Default
All props from	`"div"`	-

AlertDescription

Prop	Type	Default
All props from	`"div"`	-

AlertIcon

Prop	Type	Default
All props from	`"div"`	-

AlertContent

Prop	Type	Default
All props from	`"div"`	-

AlertStatus

Prop	Type	Default
All props from	`any`	-

Alert

On this page