Skip to content

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

Free

Information with Status Badge Alert Dialog for Solid

A maintenance notice with a calendar icon, an Upcoming badge, and one Understood button. The date in the copy is static.

UI library: Ark UI

The title is Scheduled Maintenance. The badge says Upcoming. The description names a Sunday window. Understood does not subscribe anyone.

Use a badge when the status is not the title, such as upcoming rather than an outage. A live incident belongs in an Alert on the page. In Solid, Ark UI does not check that window.

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>
        <AlertDialogTitle class="flex items-center gap-2">
          <CalendarIcon aria-hidden="true" class="size-5" />
          Scheduled Maintenance
        </AlertDialogTitle>
        <Badge pill variant="info">
          Upcoming
        </Badge>
        <AlertDialogDescription>
          We&apos

FAQ

Where should the badge go?

Under the title, before the description, in AlertDialogHeader. The title says what, the badge says when, the description gives details.

Which badge variant should a status use?

variant="info" for upcoming, warning for pending, success for done, destructive for failures. The variants follow the theme in dark mode.

What should the badge say?

One or two words: Upcoming, In Progress, Completed. Times and details belong in the description.

Can I show several badges?

Avoid it; one status is clearer. Mention anything else in the description.

Badge or icon?

Both work together: the calendar icon says what kind of message it is, the badge says its status.

Does Understood close the dialog?

Yes.

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.

Badge

Sets pill and variant="info". The rest is on the Badge page.

All 39 alert dialog examples