Skip to content

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

Free

Info with Everything Alert for Vue

An info alert with an info icon, the title Info, a beta-updates sentence, and Learn More plus Dismiss. Neither button goes anywhere.

UI library: Ark UI

An info icon, the title Info, and a line that the feature is in beta and updates ship regularly. Learn More is filled. Dismiss is outlined. Neither button goes anywhere.

Use it for a notice people might open or clear. If it only needs a moment, send a Sonner toast. In Vue, Ark UI does not follow 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">
  <InfoIcon aria-hidden="true" />
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>
    This feature is currently in beta and new updates are being released regularly.
  </AlertDescription>
  <AlertAction class="flex gap-2">
    <Button size="xs">Learn More</Button>
    <Button size="xs" variant="outline">Dismiss</Button>
  </AlertAction>
</Alert>

FAQ

What is in this info alert?

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

What color is the Info icon?

The theme's --info color, set by variant="info" on the alert. You don't add color or size classes: the alert sizes the icon and colors it for each variant, while the title and description keep the regular text colors.

Why is the icon aria-hidden?

The title already says Info, so the icon is decorative. The demo sets aria-hidden="true" on InfoIcon. The buttons still have visible labels.

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 first line of the title.

Which button variants does the demo use?

Learn More is the default Button and Dismiss 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 feature is currently in beta and new updates are being released regularly." It sits in AlertDescription, which uses the muted text color. The info tint is on the background, the border, and the icon.

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