Skip to content

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

Free

Warning with Title and Description Alert for Solid

A warning alert with the title Warning and a sentence asking people to proceed with caution. No icon and no buttons.

UI library: Ark UI

The title Warning and a sentence to proceed with caution. No icon and no buttons. The warning tint is on the frame, not the text.

Leave it up while the risk is still there, such as a quota that is nearly full. It should not fade the way a Sonner toast does. In Solid, Ark UI does not hide it on its own.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Alert class="max-w-lg" variant="warning">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      This action may have unintended consequences. Please proceed with caution.
    </AlertDescription>
  </Alert>

FAQ

What does this warning alert contain?

AlertTitle with the text Warning, and AlertDescription with "This action may have unintended consequences. Please proceed with caution." The root is variant="warning" and className="max-w-lg".

Is there an icon or a button?

No. Put TriangleAlertIcon first if you want the icon column, or Proceed and Cancel in AlertAction if the reader should choose.

Why isn't the description amber?

The warning variant tints the alert's background and border and colors the icon, but keeps the text in the theme's foreground and muted colors. Amber text would be hard to read, and the tint already marks the alert as a warning.

How do the title and description line up?

Alert is a grid with a small gap. AlertTitle is font-medium and AlertDescription follows it, wrapping inside max-w-lg.

Should warnings with descriptions auto-hide?

No. A warning should stay while the risk does, and an Alert never hides itself; it stays until your code removes it, for example once the quota is back under its limit.

How is this warning announced?

Alert defaults to role="alert", so the title and description are announced when the alert appears. The warning color is not the only signal, because the text names the risk.

API Reference

Alert

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

All 25 alert examples