Alert

A callout for displaying important information.

Heads up!

Describe what can be done about it here.

import { Alert, AlertContent, AlertDescription, AlertTitle } from "@/components/ui/alert";

export function AlertDemo() {
  return (
    <Alert className="max-w-xl">
      <AlertContent>
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>
          <p>Describe what can be done about it here.</p>
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
}

Installation

components/ui/alert.tsx

import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/cn";

const alertVariants = cva(
  "grid w-full items-start gap-x-2 rounded-xl border px-3.5 py-3 text-sm has-data-[slot=alert-indicator]:has-data-[slot=alert-action]:grid-cols-[auto_1fr_auto] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-data-[slot=alert-indicator]:grid-cols-[auto_1fr] *:[svg:not([class*='size-'])]:size-4",
  {
    defaultVariants: {
      variant: "secondary",
    },
    variants: {
      variant: {
        primary: "border-primary/30 bg-primary/10 text-primary",
        secondary:
          "border-border bg-secondary/50 text-secondary-foreground [&>svg]:text-muted-foreground",
        info: "border-info/30 bg-info/5 text-info",
        success: "border-success/30 bg-success/5 text-success",
        warning: "border-warning/30 bg-warning/5 text-warning",
        error: "border-danger/30 bg-danger/5 text-danger",
      },
    },
  }
);

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

function AlertIndicator({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-indicator"
      className={cn(
        "inline-flex items-center justify-center *:[svg:not([class*='size-'])]:size-5",
        className
      )}
      {...props}
    />
  );
}

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

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

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

function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-action"
      className={cn(
        "flex gap-1 sm:col-start-2 [[data-slot=alert-indicator]~[data-slot=alert-content]~&]:col-start-2 max-sm:[[data-slot=alert-indicator]~[data-slot=alert-content]~&]:mt-2 sm:[[data-slot=alert-indicator]~[data-slot=alert-content]~&]:col-start-3",
        className
      )}
      {...props}
    />
  );
}

function AlertClose({ className, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      data-slot="alert-close"
      className={cn(
        "col-start-2 sm:[[data-slot=alert-indicator]~[data-slot=alert-content]~&]:col-start-3",
        className
      )}
      {...props}
    />
  );
}

export {
  Alert,
  AlertIndicator,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertAction,
  AlertClose,
};

Anatomy

<Alert>
  <AlertIndicator />
  <AlertContent>
    <AlertTitle />
    <AlertDescription />
  </AlertContent>
  <AlertAction />
</Alert>

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Variants

This is a primary alert

This is a secondary alert

This is an info alert

This is a success alert

This is a warning alert

This is an error alert

import {
  IconAlertCircle,
  IconAlertTriangle,
  IconCircleCheck,
  IconInfoCircle,
} from "@tabler/icons-react";

import { Alert, AlertContent, AlertIndicator, AlertTitle } from "@/components/ui/alert";

const alerts = [
  {
    variant: "primary",
    icon: IconInfoCircle,
    title: "This is a primary alert",
  },
  {
    variant: "secondary",
    icon: IconInfoCircle,
    title: "This is a secondary alert",
  },
  {
    variant: "info",
    icon: IconInfoCircle,
    title: "This is an info alert",
  },
  {
    variant: "success",
    icon: IconCircleCheck,
    title: "This is a success alert",
  },
  {
    variant: "warning",
    icon: IconAlertTriangle,
    title: "This is a warning alert",
  },
  {
    variant: "error",
    icon: IconAlertCircle,
    title: "This is an error alert",
  },
] as const;

export function AlertDemo() {
  return (
    <div className="flex w-full flex-col items-center gap-4">
      {alerts.map(({ variant, icon: Icon, title }) => (
        <Alert key={variant} variant={variant} className="max-w-xl">
          <AlertIndicator>
            <Icon />
          </AlertIndicator>
          <AlertContent>
            <AlertTitle>{title}</AlertTitle>
          </AlertContent>
        </Alert>
      ))}
    </div>
  );
}

With icon and action

Update available

A new version of the application is available. Please update to the latest version to enjoy new features.

import { IconInfoCircle } from "@tabler/icons-react";

import {
  Alert,
  AlertAction,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function AlertDemo() {
  return (
    <Alert variant="info" className="max-w-xl">
      <AlertIndicator>
        <IconInfoCircle />
      </AlertIndicator>
      <AlertContent>
        <AlertTitle>Update available</AlertTitle>
        <AlertDescription>
          A new version of the application is available. Please update to the latest version to
          enjoy new features.
        </AlertDescription>
      </AlertContent>
      <AlertAction className="">
        <Button size="xs" variant="outline">
          Cancel
        </Button>
        <Button size="xs" variant="info">
          Update
        </Button>
      </AlertAction>
    </Alert>
  );
}

Dismissible alert

Heads up!

Describe what can be done about it here.

"use client";

import { useState } from "react";

import { IconInfoCircle, IconX } from "@tabler/icons-react";

import {
  Alert,
  AlertAction,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function AlertDemo() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      {isVisible ? (
        <Alert variant="primary" className="max-w-xl">
          <AlertIndicator>
            <IconInfoCircle />
          </AlertIndicator>
          <AlertContent>
            <AlertTitle>Heads up!</AlertTitle>
            <AlertDescription>Describe what can be done about it here.</AlertDescription>
          </AlertContent>
          <AlertAction>
            <Button
              variant="outline"
              size="icon-xs"
              className="rounded-full"
              onClick={() => setIsVisible(false)}
            >
              <IconX className="size-3.5" />
            </Button>
          </AlertAction>
        </Alert>
      ) : (
        <Button onClick={() => setIsVisible(true)}>Show</Button>
      )}
    </>
  );
}

API Reference

Alert props

Prop

Type

Default

variant?

'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'

'primary'

Alert Dialog Autocomplete

Alert

variant?'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error''primary'

On this page