Skip to content

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

Free

Info with Title, Description and Action Alert for Vue

An info alert with the title Info, a limited-beta sentence, and Learn More plus Dismiss. No icon, and the clicks are not wired.

UI library: Ark UI

The title Info, a sentence that the beta may be limited, and Learn More plus Dismiss. No icon. Learn More is filled. Dismiss is outlined. Clicks are not wired.

Use it when the notice needs a sentence and a place to read more. If they must acknowledge it first, use an Alert Dialog. In Vue, Ark UI does not open a page for Learn More.

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="info">
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>
    This feature is currently in beta. Some functionality may be limited.
  </AlertDescription>
  <AlertAction class="flex gap-2">
    <Button size="xs">Learn More</Button>
    <Button size="xs" variant="outline">Dismiss</Button>
  </AlertAction>
</Alert>

FAQ

Which parts does this info alert include?

AlertTitle, AlertDescription, and Learn More plus Dismiss in AlertAction. The root is variant="info" with className="max-w-lg". There is no icon.

Why is Learn More filled while Dismiss is outlined?

The filled default button is the action the alert is inviting; the outline button is the quiet way out. Two filled buttons would compete, and the reader would have to stop and decide which one matters.

What does the description say?

"This feature is currently in beta. Some functionality may be limited." It is the text of AlertDescription, in the muted color. The info tint is on the background and the border.

How are the buttons placed next to a wrapping description?

AlertAction is absolutely positioned at the top right, and the alert adds right padding so the title keeps its room. The description wraps in the grid under the title. Both buttons are size="xs" in one slot with className="flex gap-2".

Does this alert interrupt a screen reader?

Yes. Alert defaults to role="alert", so it is announced as soon as it appears. Pass role="status" for a polite announcement, or remove the role when the notice is on the page from the start.

Should fully-featured info alerts be dismissible?

Yes: Dismiss is there so the reader can clear a notice they've read. Wire it to your own state, since the Alert has no built-in dismiss; the demo's buttons are static.

API Reference

Alert

Sets variant="info". 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