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 Svelte, Ark UI does not check that window.
Installation
Anatomy
Usage
<AlertDialog><AlertDialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Show Info</Button>{/snippet}</AlertDialogTrigger><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'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>{#snippet asChild(props)}<AlertDialogAction {...props()}>Understood</AlertDialogAction>{/snippet}</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 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.
