React Alert - Warning with Title and Action
A warning alert with title and action buttons for cautionary notifications requiring user decision to proceed or cancel
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-warning-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-warning-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-warning-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-warning-3.jsonRelated patterns you will also like
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
Questions you might have
React Alert - Warning with Title and Description
A warning alert with title and description for cautionary notifications requiring explanatory context or mitigation steps
React Alert - 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