Overlays

Dialog

Interrupts the page for a focused task, as a centered modal or a sheet from the side.

Installation

npx sinaui add dialog

Copy src/lib/ui/Dialog.svelte, Icon.svelte and tokens.css. The close button's icon comes from @hugeicons/core-free-icons.

Examples

Centered, with a title, description and footer actions. Clicking the backdrop or pressing Escape closes it.

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Dialog from '#lib/ui/Dialog.svelte';
	import Input from '#lib/ui/Input.svelte';

	let open = $state(false);
</script>

<Button variant="secondary" onclick={() => (open = true)}>Edit scholar</Button>
<Dialog
	bind:open
	title="Edit scholar"
	description="Changes appear in the House of Wisdom catalog right away."
>
	<Input
		label="Name"
		name="name"
		value="Maryam al-Ijliya"
		autocomplete="off"
		hint="Astrolabe maker, Aleppo, 10th century."
	/>
	{#snippet footer()}
		<Button variant="secondary" onclick={() => (open = false)}>Cancel</Button>
		<Button onclick={() => (open = false)}>Save changes</Button>
	{/snippet}
</Dialog>

Side sheet

side="start" slides in from the reading-start edge, and from the right in right-to-left pages. The docs' mobile navigation uses it.

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Dialog from '#lib/ui/Dialog.svelte';

	let open = $state(false);
</script>

<Button variant="secondary" onclick={() => (open = true)}>Open reading rooms</Button>
<Dialog bind:open side="start" title="Reading rooms" description="Where the manuscripts are kept.">
	<ul>
		<li>Bayt al-Hikma, Baghdad</li>
		<li>Library of Córdoba</li>
		<li>Al-Qarawiyyin, Fez</li>
	</ul>
</Dialog>

Props

Prop	Type	Default
`open`	`boolean`, bindable	`false`
`title`	`string` (required)
`description`	`string`
`side`	`'center' \| 'start'`	`'center'`
`closeLabel`	`string`	`'Close'`
`footer`	Snippet

Accessibility

Built on <dialog> with showModal(): focus stays inside, the page behind is inert, and focus returns to the trigger on close.
Labeled by its title and described by its description.
Dragging a text selection out onto the backdrop doesn't close it.
Add autofocus to the field that should receive focus when it opens. Translate closeLabel for non-English interfaces.

Key	Action
`Tab` / `Shift` `Tab`	Moves between controls inside the dialog.
`Escape`	Closes the dialog and returns focus.