Actions and overlays

Dialog

components/ui/dialog

A modal on the native dialog element, for confirmations and short forms.

Craft notes

Open it with the keyboard, press Escape, and notice where focus lands.

Sounds: dialog

Every prop combination the component supports. The chip on each card is the exact props it passes.

Confirmation
title="Discard changes?"
A destructive choice with a way out.
Discard changes?
Your edits will be lost. This can't be undone.
Announcement
footer={<Button>Got it</Button>}
One action that acknowledges news.
Sounds now follow the theme
Light and dark share one token set, so every component and its sound stay in step when you switch.
Short form
children={<Input />}
A field inside, with validation before saving.
Rename project
Names show in the sidebar and in shared links.
Project name