Skip to content

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

Free

Information with Action Button Alert Dialog for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not turn notifications on.

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

Usage

<AlertDialog>
    <AlertDialogTrigger asChild={props => <Button {...props()} variant="outline">Show Info</Button>} />
    <AlertDialogContent>
      <AlertDialogHeader>
        <div class="flex items-center gap-2">
          <BellIcon aria-hidden="true" class="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={props => <AlertDialogAction {...props()}>Learn More</AlertDialogAction>} />
      </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 and props. The rest is on the Alert Dialog page.

Button

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

All 39 alert dialog examples