Skip to content

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

Free

Information with Action Button Alert Dialog for Ark UI

An informational dialog with a bell icon beside Stay Updated, and the choices Not Now and Learn More.

A bell icon sits beside Stay Updated. The text is about messages and team activity. Not Now and Learn More do not enable notifications or open a page.

Offer a second action when the notice has a place to go. A note that should stay on the page is an Alert. In React, Ark UI does not turn notifications on.

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 Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show Info</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div className="flex items-center gap-2">
        <BellIcon aria-hidden="true" className="size-5 text-info" />
        <AlertDialogTitle>Stay Updated</AlertDialogTitle>
      </div>
      <AlertDialogDescription>
        Enable notifications to stay informed about important updates, new
        messages, and team activities.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Not Now</AlertDialogCancel>
      <AlertDialogClose asChild>
        <AlertDialogAction>Learn More</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

What should the action say?

What happens next: Learn More opens details, it doesn't turn anything on. Avoid Yes or Proceed, which don't say where they lead.

Should Learn More change a setting?

No. Let it navigate to details or settings, and ask for the actual change there. This dialog informs and invites; it doesn't commit people to anything.

Why Not Now instead of Cancel?

It's softer and implies the offer still stands. Keep Cancel for forms and real decisions.

Does an information dialog always need two buttons?

Only when there's a meaningful action to offer. For plain acknowledgment, one button is enough, as in Simple Information Alert.

Should both buttons look equally important?

No. AlertDialogAction gets the solid style and AlertDialogCancel the outline one, which suggests the preferred path while keeping the way out clear.

Does Learn More close the dialog?

Yes; navigate in its click handler.

API Reference

Alert Dialog

Sets asChild. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 alert dialog examples