Components · Dialog · Use

Dialog

Dialog purpose, copy, and actions are application content; this recipe currently implements one basic dialog construction.

State

Markup

<script lang="ts">
	import { Dialog } from '@ark-ui/svelte';
</script>

<Dialog.Root>
	<Dialog.Trigger class="button-root button-filled">Open dialog</Dialog.Trigger>
	<Dialog.Backdrop class="dialog-backdrop" />
	<Dialog.Positioner class="dialog-positioner">
		<Dialog.Content class="dialog-content">
			<Dialog.Title class="dialog-title">Publish theme?</Dialog.Title>
			<Dialog.Description class="dialog-description">
				Create a version your team can install.
			</Dialog.Description>
			<div class="dialog-actions">
				<Dialog.CloseTrigger class="button-root button-text">Cancel</Dialog.CloseTrigger>
				<button type="button" class="button-root button-filled">Publish</button>
			</div>
		</Dialog.Content>
	</Dialog.Positioner>
</Dialog.Root>