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.
Warning with Title, Description, and Action
A comprehensive warning alert combining title, description, and action buttons for complete cautionary messaging with context and decision options
Simple Confirmation Dialog
A simple confirmation dialog with Cancel and Continue actions for critical user decisions requiring explicit confirmation