Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert examples · Warning

Warning with Title, Description and Action Alert for React

A warning alert with a title, a description, and Proceed and Cancel buttons.

Framework
UI library

When a caution needs context and a choice, combine them. This React alert stacks an AlertTitle and an AlertDescription in an Alert with variant="warning" and adds Proceed and Cancel in AlertAction. Use it for risky actions with consequences to explain, such as an operation that can't be undone or a quota that's about to run out.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should I use fully-featured warning alerts?

When the reader needs to understand the risk before choosing: what will happen, and whether to go on. Without a decision, drop the buttons; without consequences to explain, drop the description.

What should warning descriptions emphasize?

The consequence: what can't be undone, what will be lost, what will stop working. That's what the reader weighs when choosing between the two buttons.

How do I create hierarchy in warning alerts?

The parts do it: a heavier title, a muted description, a filled button for one choice and an outlined one for the other. The amber tint frames the alert without competing with the text.

Should warning buttons stack or stay horizontal?

Horizontal, in AlertAction at the end of the title row, as here, with the description wrapping underneath. Keep the labels short so both fit.

Should Proceed or Cancel be styled as primary action?

Whichever you want the reader to choose. The demo makes Proceed the filled default button; for a destructive outcome, making Cancel the filled one steers readers to the safe path.

When should I use warning alerts vs confirmation dialogs?

Use an inline warning when the reader can keep working and decide later. Use an Alert Dialog when the action can't be undone and they must decide before it happens.

All 25 alert examples