Skip to content

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

Free

Standard with Title and Action Alert for Ark UI

A neutral alert with the title Success, View Details, and Dismiss. No icon, no description, no color tint, and the buttons do nothing.

The title Success on a plain alert, with View Details and Dismiss. No icon, no description, and no color tint. The buttons do nothing in this demo.

Use it for a finished job people might inspect. If they do not need a follow-up, a Toast is enough. In React, Ark UI will not open the details.

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">
  <AlertTitle>Success</AlertTitle>
  <AlertAction className="flex gap-2">
    <Button size="xs">View Details</Button>
    <Button size="xs" variant="outline">
      Dismiss
    </Button>
  </AlertAction>
</Alert>

FAQ

What does this standard alert contain?

An AlertTitle of Success, plus View Details and Dismiss in AlertAction. There is no variant, so the alert uses the default card background and border.

Which button variants does the demo use?

View Details is the default Button and Dismiss is variant="outline". Both are size="xs", in one AlertAction with className="flex gap-2".

Where do the buttons sit?

AlertAction is absolutely positioned at the top right. The alert adds right padding so the title keeps its room. The two buttons stay in one row.

Do the buttons do anything in this file?

No. Neither button has a click handler or an href. Alert also has no built-in dismiss, so Dismiss hides the alert only if your state stops rendering it.

How wide is the alert?

className="max-w-lg" on Alert caps it. The title is one word, which leaves the padded area for the two xs buttons.

How is this alert announced?

Alert defaults to role="alert", so the title is announced when it appears. Pass role="status" for a notice that should wait until the reader is idle.

API Reference

Alert

No extra props in this demo. 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