Dialog
Modal dialog using native dialog element
Accessibility
- Always provide a clear heading so the dialog context is announced when it opens.
- Ensure there is an obvious close path for both keyboard and pointer users.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Dialog, Button } from '@dryui/ui';
</script>
<Dialog.Root bind:open={showDialog}>
<Dialog.Trigger>
<Button>Open Dialog</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>Confirm</Dialog.Header>
<p>Are you sure?</p>
<Dialog.Footer>
<Button variant="outline" onclick={() => showDialog = false}>Cancel</Button>
<Button variant="solid" onclick={handleConfirm}>Confirm</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>Import options
Root package
ts
import { Dialog } from '@dryui/ui'Per-component subpath
ts
import { Dialog } from '@dryui/ui/dialog'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Dialog.Root | |||||
| open | boolean | Controls whether the dialog is currently shown. | false | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Dialog.Trigger | |||||
| children | Snippet | Interactive element that opens the dialog. | — | ✓ | — |
Dialog.Content | |||||
| children | Snippet | Main dialog surface content rendered inside the modal. | — | ✓ | — |
Dialog.Overlay | |||||
Dialog.Header | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Dialog.Body | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Dialog.Footer | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Dialog.Close | |||||
| children | Snippet | Label or content rendered inside the dismiss control. | — | ✓ | — |