Shadcn.io is not affiliated with official shadcn/ui
Warning with Title and Action
A warning alert with title and action buttons for cautionary notifications requiring user decision to proceed or cancel
Warnings with choices respect user agency. This React alert displays amber-themed warning titles with Proceed and Cancel buttons using shadcn/ui's warning styling (border-warning/80, bg-warning/5). Built with Radix UI and Button components colored to match alert theme (bg-warning for proceed action), the pattern presents cautions while offering clear decision paths. Perfect for risky action confirmations, destructive operation warnings, quota limit alerts with upgrade options, or any caution where users need to make informed choice to continue or back out.
Warning with Title and Action preview
Installation
Related Components
Warning with Title
Minimal warning without actions
Warning with Description
Warning with explanatory text
Error with Actions
Error variant with recovery actions
Info with Actions
Informational variant with buttons
Success with Actions
Success variant with action buttons
Warning with Everything
Full-featured warning with icon
FAQ
Was this page helpful?
Sign in to leave feedback.
Warning with Title and Description
A warning alert with title and description for cautionary notifications requiring explanatory context or mitigation steps
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