shadcn.io is an independent project built on shadcn/ui
An info icon sits beside New Features Available, and it is hidden from assistive tech. The text mentions new collaboration features. Got it is the only button. It does not open another page.
Use one button when the reader only needs to acknowledge the note. A note that should stay visible is an Alert. In Svelte, Ark UI does not track who dismissed it.
Installation
Anatomy
Usage
<AlertDialog><AlertDialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Show Info</Button>{/snippet}</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><div class="flex items-center gap-2"><InfoIcon aria-hidden="true" class="size-5 text-info" /><AlertDialogTitle>New Features Available</AlertDialogTitle></div><AlertDialogDescription>We've added new collaboration features to help your team work more efficiently. Check out the what's new page to learn more.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose>{#snippet asChild(props)}<AlertDialogAction {...props()}>Got it</AlertDialogAction>{/snippet}</AlertDialogClose></AlertDialogFooter></AlertDialogContent></AlertDialog>FAQ
What color should an info icon be?
text-info, the theme's blue for neutral information. Keep destructive, success and warning colors for messages with that weight.
Beside the title or above it?
Beside it, in a flex items-center gap-2 row, for routine information. Center it above the title for messages that need more attention.
Can different messages use different icons?
Yes, consistently: info for general notes, a lightbulb for tips, a bell for notifications. People learn the system.
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.
