Dialog

Dialogs provide important information or prompt users for a decision. They disable app functionality behind them until confirmed, dismissed, or a required action is taken.

M3 Spec

open_in_new

Overview

The component implements the Material Design 3 Dialog pattern: a modal surface with an optional headline, supporting text, custom content, and a cancel/confirm button pair. The overlay and surface both animate in/out with the library's shared enter/exit transition.

Naming: Dialogue vs Dialog

The exported component name is Dialogue — the British spelling — even though this docs page (and the underlying M3 concept) is called "Dialog." This is a naming quirk of the library, not a typo: import { Dialog } from '@noxlovette/material' will fail. Always import Dialogue.

Internally the component composes bits-ui's own Dialog primitive (Dialog.Root, Dialog.Content, etc.) — that's a separate, unrelated import from the headless library, which is part of why the wrapper needed a different name.

Import

import { Dialogue } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Open the Dialogue story, plus With Extra Content and Loading Confirm variants.

Basic Usage

enhance and confirmText are required — the confirm button is a real form submit button, not just a click handler:

<script lang="ts">
  import { Dialogue } from '@noxlovette/material';
  import { enhance } from '$app/forms';

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

<button onclick={() => (open = true)}>Delete file</button>

<Dialogue
  bind:open
  {enhance}
  headline="Delete this file?"
  supportingText="This action cannot be undone."
  confirmText="Delete"
  cancelText="Cancel"
  confirmAction="?/deleteFile"
/>

Dialogue Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the dialog is visible. Bindable.
`enhance` required	`any`	`—`	The dialog's content is a <form> submitted with method="POST"; this action is applied via use:enhance. In a SvelteKit app, pass superforms' or $app/forms' enhance.
`headline`	`string`	`—`	Optional headline text rendered as the Dialog.Title.
`supportingText`	`string`	`—`	Optional descriptive body text rendered as the Dialog.Description.
`confirmText` required	`string`	`—`	Label for the confirm (submit) button.
`cancelText`	`string`	`'Отмена'`	Label for the cancel button. Note the default is the Russian word for "Cancel" (this library's origin project is Russian-localized) — pass an explicit value for an English UI.
`confirmAction`	`string`	`—`	Optional form action URL for the confirm button, passed to the underlying <form action>.
`loading`	`boolean`	`false`	Shows a loading state on the confirm button and disables it.
`disabled`	`boolean`	`false`	Disables the confirm button.
`delegateClose`	`boolean`	`false`	When true, the confirm button is NOT wrapped in Dialog.Close — the consumer is responsible for closing the dialog (e.g. from a superforms onResult callback), useful to keep it open on validation failure.
`portalDisabled`	`boolean`	`false`	Disables the Dialog.Portal — useful when the dialog is nested inside a form that already manages its own stacking.
`minWidth`	`string`	`'280px'`	Minimum CSS width of the dialog surface.
`maxWidth`	`string`	`'560px'`	Maximum CSS width of the dialog surface.
`children`	`Snippet`	`—`	Optional additional content rendered between the supporting text and the action buttons, e.g. a form field.
`contentProps`	`Dialog.ContentProps`	`—`	Additional props forwarded to bits-ui's Dialog.Content.
`formProps`	`Record<string, unknown>`	`—`	Additional props spread onto the underlying <form> element.
`class`	`string`	`—`	Additional CSS classes for the dialog surface.

Dialogue also accepts every other bits-ui Dialog.RootProps, spread onto the root.

Accessibility

block

Focus trap

Focus is trapped inside the dialog while open and returned to the trigger on close, via bits-ui Dialog.Root.

label

Labelling

headline and supportingText render as Dialog.Title and Dialog.Description, wired to aria-labelledby/aria-describedby automatically.

keyboard

Escape to dismiss

Pressing Escape closes the dialog by default, matching modal dialog expectations.