Shadcn.io is not affiliated with official shadcn/ui
Warning with Everything
A complete warning alert with icon, title, description, and action buttons for maximum cautionary clarity and informed decision making
This is the full warning experience with maximum visibility. TriangleAlert icon from Lucide React, clear title, risk explanation, and action buttons working together in shadcn/ui's amber warning styling (border-warning/80, bg-warning/5, text-warning). Built with flex-row items-start gap-3 for icon alignment and translate-y-0.5 for optical centering, this pattern delivers every element for prominent risk communication. Perfect for destructive operations requiring full informed consent, irreversible actions with explained consequences, critical quota warnings with upgrade paths, or significant cautions where maximum visibility, complete context, and explicit decision are essential.
Warning with Everything preview
Installation
Related Components
Warning with Description and Actions
Full warning without icon
Warning with Title
Minimal warning baseline
Error with Everything
Error variant fully featured
Info with Everything
Info variant fully featured
Success with Everything
Success variant fully featured
Warning with Actions
Warning with action buttons
FAQ
Was this page helpful?
Sign in to leave feedback.
Success with Title, Description, and Action
A comprehensive success alert combining title, description, and action buttons for complete positive messaging with context and engagement
Warning with Title
A minimal warning alert with just a title for simple cautionary notifications without detailed explanations