Skip to Content
Shadcn ComponentsAlert

Alert

Displays a callout for user attention.

For guidance on when to use Alert vs. Sonner, visual style selection, and content guidelines, see the In-product notification pattern.

Default (tinted)

Low-opacity status background with neutral title text. Use for persistent messages, from routine updates to blocking errors.

Accent (outline)

Status-colored border and icon with default text. Dismissible. Use for contextual warnings and acknowledged states.

Installation

npx shadcn@latest add @uipath/alert

Usage

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

Tinted (default)

<Alert status="error" visual="tinted">
  <OctagonXIcon className="h-4 w-4" />
  <AlertTitle>Connection failed</AlertTitle>
  <AlertDescription>
    Unable to reach the server. Check your network connection and try again.
  </AlertDescription>
</Alert>

Outline

<Alert status="warning" visual="outline">
  <TriangleAlertIcon className="h-4 w-4" />
  <AlertTitle>API rate limit approaching</AlertTitle>
  <AlertDescription>
    You have used 90% of your monthly API quota. Consider upgrading your plan.
  </AlertDescription>
</Alert>

Props

PropTypeDefaultDescription
status"default" | "warning" | "error"—Sets the semantic status color
visual"outline" | "tinted"—Sets the visual treatment
variant"default" | "destructive""default"Legacy shadcn variant (use status + visual instead)

Complex alert patterns (edge cases)

For guidance on when and how to use these patterns, see In-product notification.

AccordionAlert Dialog