Skip to content

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

Free

Warning with Everything Alert for React

A warning alert with a triangle icon, the title Warning, a line that the action cannot be undone, and Proceed plus Cancel.

A warning icon, the title Warning, and a line that the action cannot be undone. Proceed is filled. Cancel is outlined. Neither button does anything yet.

Use it before a risky step people can still walk away from. If they must decide before it happens, use an Alert Dialog. In React, Base UI does not block the rest of the page.

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">
  <TriangleAlertIcon aria-hidden="true" />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>
    This action may have unintended consequences and cannot be undone.
  </AlertDescription>
  <AlertAction className="flex gap-2">
    <Button size="xs">Proceed</Button>
    <Button size="xs" variant="outline">
      Cancel
    </Button>
  </AlertAction>
</Alert>

FAQ

What is in this warning alert?

TriangleAlertIcon first, then AlertTitle, AlertDescription, and Proceed plus Cancel in AlertAction. The root is variant="warning" with className="max-w-lg".

What color is the TriangleAlert icon?

The theme's --warning color, set by variant="warning" on the alert. You don't add color or size classes to the icon; the alert handles both, and the text keeps its regular colors.

How does the icon line up with the title?

Put it first, before AlertTitle: the alert places a direct svg child in its own column spanning the title and description, and aligns it with the title's first line.

Why is the icon aria-hidden?

The title already says Warning, so the icon is decorative. The demo sets aria-hidden="true" on TriangleAlertIcon.

Which button variants does the demo use?

Proceed is the default Button and Cancel is variant="outline". Both are size="xs" in one AlertAction with className="flex gap-2". Neither has a click handler.

What does the description say?

"This action may have unintended consequences and cannot be undone." It is an AlertDescription in the muted color. The warning tint is on the background, the border, and the icon.

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