Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Warning with Title and Action Alert for React

A warning alert with the title Warning and Proceed plus Cancel. No icon, no description, and the buttons have no handlers.

The title Warning on a warning-tinted alert, with Proceed and Cancel beside it. No icon and no description. The buttons have no handlers.

Use it when the risk is obvious and people can choose now or not. A choice they cannot skip belongs in an Alert Dialog. In React, Base UI will not run Proceed.

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

Anatomy

Alert anatomy: root, icon, title, description, action

Usage

<Alert className="max-w-lg" variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertAction className="flex gap-2">
    <Button size="xs">Proceed</Button>
    <Button size="xs" variant="outline">
      Cancel
    </Button>
  </AlertAction>
</Alert>

FAQ

What sits next to the Warning title?

Proceed and Cancel, in one AlertAction. The alert is variant="warning" with a single AlertTitle and no description.

Why is Proceed a default button rather than amber?

Button has no warning variant, so Proceed uses the default variant and Cancel uses outline, both size="xs". The alert's amber tint carries the caution. In the warning variant, ghost buttons inside AlertAction take an amber hover color.

Where are the buttons positioned?

AlertAction is absolutely positioned at the top right, and the alert adds right padding so the title keeps its room. className="flex gap-2" puts Proceed first and Cancel after it.

Do Proceed and Cancel do anything in this file?

No. Neither button has a click handler. Stopping or continuing is something you add. Alert itself does not close.

Why are both buttons in one AlertAction?

That part is a single absolutely positioned slot. A second AlertAction would sit on top of the first. The title is one word, which leaves room for the two xs buttons.

How is this warning announced?

Alert defaults to role="alert", so the title is announced when the alert appears. The amber border is not the only signal, because the title says Warning.

API Reference

Alert

Sets variant="warning". The rest is on the Alert page.

Button

Sets size="xs" and variant="outline". The rest is on the Button page.

All 25 alert examples