Unreviewedconst [open, setOpen] = useState(false)
<Button onClick={() => setOpen(true)}>Open</Button>
<Dialog
open={open}
onStateChange={(_e, { next }) => setOpen(next)}
header="Delete project?"
footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button priority="primary" tone="critical">Delete</Button></>}
>
This action cannot be undone.
</Dialog>
<Dialog>— a modal dialog (or edge drawer, viaposition), built on a native<dialog>inside<a-dialog>— so the top layer, focus trap, focus return, backdrop, and Esc all come from the platform.A pure, stateless pass-through: the element owns all interaction (open/close, dismiss, focus), so the wrapper holds no state and grabs no ref — it only maps props to attributes and drops content into the
header/ body /footer/closeslots.Uncontrolled (
defaultOpen, or thenametrigger convenience): the element owns open/close. Controlled (open+onStateChange): the wrapper emitsstate="open"|"closed"; the element treats the attribute as the source of truth, and every user dismiss only requests a change (a consumer can reject it). See STATEFUL-COMPONENTS.md.Requires
@antadesign/anta/elementsto be imported (client-side only) to register the underlying custom element.