Installation

Barrel

import { Dialog } from 'kumo-svelte';

Granular

import { Dialog } from 'kumo-svelte/components/dialog';

Usage

<script lang="ts">
  import { Dialog, Button } from "kumo-svelte";

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

<Dialog bind:open title="Dialog Title" description="Dialog content goes here.">
  {#snippet trigger(props)}
    <Button {...props}>Open</Button>
  {/snippet}

  <div class="flex justify-end gap-2">
    <Button variant="secondary" onclick={() => (open = false)}>Cancel</Button>
  </div>
</Dialog>

Dialog vs Alert Dialog

The Dialog component supports two ARIA roles to properly convey semantic meaning to assistive technologies:

Examples

Basic Dialog

Sizes

The size prop controls the fixed width of the dialog on desktop. Content that overflows the dialog width will scroll horizontally within the dialog rather than stretching it.

Alert Dialog (role="alertdialog")

For destructive or confirmation dialogs, use role="alertdialog" on Dialog. This provides proper accessibility semantics by rendering the dialog with role="alertdialog" instead of role="dialog".

Confirmation Dialog (with disablePointerDismissal)

For confirmation dialogs that should not be dismissed by clicking outside, use disablePointerDismissal on Dialog. This can be combined with role="alertdialog" for proper accessibility.

With Actions

Custom Max Width

Consumer max-width utilities such as max-w-lg should cap the dialog on desktop, even when the dialog contains wide intrinsic content.

With Select

Dialog containing a Select dropdown.

With Combobox

Dialog containing a Combobox for searchable selection.

With Dropdown

Dialog containing a Dropdown menu.

API Reference

Dialog

The main dialog container that renders the modal overlay and popup.