shadcn.io is an independent project built on shadcn/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 Vue, Ark UI does not check that window.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<Button variant="outline">Show Info</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle class="flex items-center gap-2">
<CalendarIcon aria-hidden="true" class="size-5" />Scheduled Maintenance
</AlertDialogTitle>
<Badge :pill="true" variant="info">Upcoming</Badge>
<AlertDialogDescription>
We'll be performing scheduled maintenance on Sunday, March 15th from 2:00 AM - 4:00 AM EST. During this time, the service may be temporarily unavailable.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogClose :asChild="true">
<AlertDialogAction>Understood</AlertDialogAction>
</AlertDialogClose>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>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.
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.
Badge
Sets pill and variant="info". The rest is on the Badge page.
