Alert

shadcn/ui

2 variants

Persistent inline message for important info. For transient feedback after actions, use Sonner instead.

@/components/ui/alert

Variants

Variant	Icon	Preview	When to use
default	Info / any	Heads up You can add components using the CLI.	Info, tips, neutral announcements
destructive	AlertCircle	Error Ticket could not be created. Please try again.	Errors, failures, blocked states
warning*	TriangleAlert	Warning SLA deadline is in 2 hours.	Warnings, SLA alerts — use status tokens
success*	CheckCircle2	Success Ticket closed successfully.	Persistent success (not transient) — use status tokens

* warning and success are not shadcn variants — achieved via className overrides using Thilo status tokens

With and without title

With title + description

This ticket is being edited by Ana M. Your changes will not be saved.

Description only (no title)

Settings saved successfully.

In context — form validation error

Create ticket

Title is required · Business partner is required

Title

Alert vs Sonner

	Alert	Sonner
Persistence	Permanent — stays until dismissed or resolved	Auto-dismisses after 4s
Location	Inline — part of page content	Overlay — bottom-right corner
Best for	Form errors, page-level warnings, system status	Action feedback (saved, deleted, failed)

On this page