Dialog

Presents a focused decision or short task in a native modal dialog.

Astro

---
import { Dialog } from '@charvesta/cetha';
---

<Button data-cetha-dialog-open="edit-dialog">Edit</Button>
<Dialog id="edit-dialog" title="Edit workspace" closeLabel="Close dialog">
  <p>Dialog content</p>
</Dialog>

API reference

Prop	Type	Default	Description
`id`*	`string`	—	Target used by dialog open and close controls.
`title`*	`string`	—	Accessible dialog heading.
`description`	`string`	—	Optional purpose statement.
`closeLabel`*	`string`	—	Accessible label for the close button.
`closeOnBackdrop`	`boolean`	`true`	Allows backdrop click dismissal.
`class`	`string`	—	Additional classes forwarded to the rendered element.

Accessibility

Focus moves into the dialog and returns to its trigger after dismissal.