Alert

Displays a callout for user attention with contextual feedback messages and optional icons.

Loading component...

Installation

npx shadcn@latest add alert

Usage

import { Terminal } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertDemo() {
  return (
    <Alert>
      <Terminal />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components and dependencies to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

API Reference

The root alert container that provides visual feedback to users.

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	The visual style variant of the alert.
`className`	`string`	-	Additional CSS classes to apply to the alert.
`children`	`React.ReactNode`	-	The content to display inside the alert.

AlertTitle

The title component for the alert message.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the title.
`children`	`React.ReactNode`	-	The title text content.

AlertDescription

The description component that provides additional context.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the description.
`children`	`React.ReactNode`	-	The description content, can include formatted text and lists.

Examples

Informational

Loading component...

Success States

Loading component...

Warning Messages

Loading component...

With Actions

Loading component...

"use client"import { useState } from "react"import { Bell, Download, X, RefreshCw } from "lucide-react"import { Button } from "@/components/ui/button"import {  Alert,  AlertDescription,  AlertTitle,} from "@/components/ui/alert"export default function AlertWithActions() {  const [showFirst, setShowFirst] = useState(true)  const [showSecond, setShowSecond] = useState(true)  const [showThird, setShowThird] = useState(true)  return (    <div className="w-full p-6">      <div className="grid w-full max-w-xl mx-auto items-start gap-4">        {showFirst && (          <Alert className="relative">            <Bell />            <AlertTitle>New Notification Settings</AlertTitle>            <AlertDescription>              <p className="mb-3">We've updated our notification system for better control.</p>              <div className="flex gap-2">                <Button size="sm" variant="default">                  Review Settings                </Button>                <Button size="sm" variant="outline">                  Learn More                </Button>              </div>            </AlertDescription>            <button              onClick={() => setShowFirst(false)}              className="absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100"            >              <X className="h-4 w-4" />              <span className="sr-only">Dismiss</span>            </button>          </Alert>        )}                {showSecond && (          <Alert>            <Download />            <AlertTitle>Export Ready</AlertTitle>            <AlertDescription>              <p className="mb-3">Your data export is ready for download (expires in 24 hours).</p>              <div className="flex items-center gap-2">                <Button size="sm" variant="default">                  Download Now                </Button>                <Button                   size="sm"                   variant="ghost"                  onClick={() => setShowSecond(false)}                >                  Dismiss                </Button>                <span className="text-xs text-muted-foreground ml-auto">                  2.5 MB                </span>              </div>            </AlertDescription>          </Alert>        )}                {showThird && (          <Alert variant="destructive">            <RefreshCw />            <AlertTitle>Sync Failed</AlertTitle>            <AlertDescription>              <p className="mb-3">Unable to sync your data with the server.</p>              <div className="flex gap-2">                <Button                   size="sm"                   variant="destructive"                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"                >                  Retry Sync                </Button>                <Button                   size="sm"                   variant="outline"                  className="border-destructive/50 text-destructive hover:bg-destructive/10"                  onClick={() => setShowThird(false)}                >                  Ignore                </Button>              </div>            </AlertDescription>          </Alert>        )}                {!showFirst && !showSecond && !showThird && (          <div className="text-center">            <p className="text-muted-foreground mb-4">All alerts dismissed</p>            <Button              variant="outline"              onClick={() => {                setShowFirst(true)                setShowSecond(true)                setShowThird(true)              }}            >              Reset All Alerts            </Button>          </div>        )}      </div>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Implementation Details

The Alert component uses a sophisticated grid-based layout system:

Grid Layout System

The component employs CSS Grid with dynamic column configuration:

Without icon: Single column layout (grid-cols-[0_1fr])
With icon: Two-column layout (grid-cols-[calc(var(--spacing)*4)_1fr])
Uses the :has() CSS selector to detect icon presence
Icons automatically sized to 16x16px (size-4)

Styling Architecture

Built with class-variance-authority for variant management:

Base styles: Rounded corners, border, padding, responsive text
Default variant: Uses card background and foreground colors
Destructive variant: Destructive text color with modified description opacity

Component Composition

<Alert>
  <Icon />                {/* Optional: Positioned in first grid column */}
  <AlertTitle />         {/* Positioned in second column, single line */}
  <AlertDescription />   {/* Positioned in second column, below title */}
</Alert>

Accessibility

The Alert component follows WAI-ARIA guidelines for status messages:

ARIA Attributes

role="alert": Announces important messages to screen readers
Semantic HTML structure for proper content hierarchy
Focus management considerations for interactive content

Alert content is automatically announced when rendered
Title and description maintain proper heading hierarchy
Icons are decorative and don't interfere with screen reader flow

While alerts are typically non-interactive, any interactive content within follows standard keyboard patterns:

Links and buttons within alerts remain keyboard accessible
Tab order flows naturally through interactive elements

Best Practices

Content Guidelines

Keep titles concise: Single line, clear and actionable
Provide context: Use descriptions to explain what happened and what to do
Choose appropriate variants: Use destructive only for errors/warnings
Include icons: Visual indicators improve scannability

Usage Patterns

Success Messages

<Alert>
  <CheckCircle2Icon />
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>

Error Handling

<Alert variant="destructive">
  <AlertCircleIcon />
  <AlertTitle>Payment Failed</AlertTitle>
  <AlertDescription>
    <p>We couldn't process your payment.</p>
    <ul className="list-disc list-inside text-sm mt-2">
      <li>Check your card details</li>
      <li>Ensure sufficient funds</li>
      <li>Try a different payment method</li>
    </ul>
  </AlertDescription>
</Alert>

Information Notices

<Alert>
  <InfoIcon />
  <AlertTitle>New Feature Available</AlertTitle>
  <AlertDescription>
    We've added dark mode support. Enable it in your settings.
  </AlertDescription>
</Alert>

Customization

Custom Variants

Extend the alert with custom variants:

// Custom warning variant
<Alert className="border-yellow-200 bg-yellow-50 text-yellow-900">
  <AlertTriangleIcon className="text-yellow-600" />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription className="text-yellow-800">
    This action cannot be undone.
  </AlertDescription>
</Alert>

Icon Positioning

The grid system automatically handles icon alignment:

Icons are vertically aligned with the title
Consistent spacing maintained across all variants
Responsive sizing adapts to content

SEO Considerations

For better SEO and accessibility:

Semantic Structure: Alert content uses proper HTML elements
Meaningful Content: Clear, descriptive messages improve user experience
Status Indicators: Visual and semantic indicators for message types
Progressive Enhancement: Alerts remain readable without CSS/JavaScript

Alert

Installation

Usage

API Reference

Alert

AlertTitle

AlertDescription

Examples

Informational

Success States

Warning Messages

With Actions

Implementation Details

Grid Layout System

Styling Architecture

Component Composition

Accessibility

ARIA Attributes

Keyboard Navigation

Best Practices

Content Guidelines

Usage Patterns

Success Messages

Error Handling

Information Notices

Customization

Custom Variants

Icon Positioning

SEO Considerations

On this page

Alert

Reactalert

Reactalert

Reactalert

Reactalert

Reactbutton

Reactalert

On this page