3

Alert

Displays a callout for important, contextual messages.

Last updated August 8, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • Replaced physical pr-18/right-2 with logical pe-18/end-2 for RTL
  • Replaced text-left with text-start

Overview

import { CheckCircle2Icon } from "lucide-react"
 
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
 
export function AlertDemoExample() {
  return (
    <Alert className="w-full max-w-sm">
      <CheckCircle2Icon />
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your changes have been saved.</AlertDescription>
    </Alert>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/alert.json

Usage

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
 
export function Example() {
  return (
    <Alert>
      <Icon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app.
      </AlertDescription>
    </Alert>
  )
}

Destructive

import { AlertCircleIcon } from "lucide-react"
 
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
 
export function AlertDestructiveExample() {
  return (
    <Alert variant="destructive" className="w-full max-w-sm">
      <AlertCircleIcon />
      <AlertTitle>Unable to process payment</AlertTitle>
      <AlertDescription>
        Please verify your billing information and try again.
      </AlertDescription>
    </Alert>
  )
}

Action

Use AlertAction to place a button in the corner of the alert.

import { MegaphoneIcon } from "lucide-react"
 
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
 
export function AlertActionExample() {
  return (
    <Alert className="w-full max-w-sm">
      <MegaphoneIcon />
      <AlertTitle>New version available</AlertTitle>
      <AlertDescription>
        A new version of the registry is ready to install.
      </AlertDescription>
      <AlertAction>
        <Button size="sm" variant="outline">
          Update
        </Button>
      </AlertAction>
    </Alert>
  )
}

RTL

import { CheckCircle2Icon } from "lucide-react"
 
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
 
export function AlertRtlExample() {
  return (
    <Alert className="w-full max-w-sm">
      <CheckCircle2Icon />
      <AlertTitle>تغییرات ذخیره شد</AlertTitle>
      <AlertDescription>تغییرات شما با موفقیت ذخیره شدند.</AlertDescription>
    </Alert>
  )
}

API Reference

Alert

Edit this page on GitHub
PreviousAccordionNextAlert Dialog