Skip to content

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

Free

Success with Everything Alert for Vue

A success alert with a check icon, the title Success, a line that the changes are saved and live, and View Details plus Dismiss.

UI library: Ark UI

A check icon in the success color, the title Success, and a line that the changes are saved and live. View Details is filled. Dismiss is outlined. The buttons are not wired.

Use it when a confirmation should stay and people may open the details. A quick saved note can be Sonner instead. In Vue, Ark UI will not hide this on a timer.

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="success">
  <CircleCheckIcon aria-hidden="true" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully and are now live.
  </AlertDescription>
  <AlertAction class="flex gap-2">
    <Button size="xs">View Details</Button>
    <Button size="xs" variant="outline">Dismiss</Button>
  </AlertAction>
</Alert>

FAQ

What is in this success alert?

CircleCheckIcon first, then AlertTitle, AlertDescription, and View Details plus Dismiss in AlertAction. The root is variant="success" with className="max-w-lg".

What color is the CircleCheck icon?

The theme's --success color, set by variant="success" 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 Success, so the icon is decorative. The demo sets aria-hidden="true" on CircleCheckIcon.

How are the buttons set up?

View Details 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?

"Your changes have been saved successfully and are now live." It is an AlertDescription in the muted color. The success tint is on the background, the border, and the icon.

API Reference

Alert

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