Dialog

Square modal that becomes a bottom-sheet drawer on mobile, with a close icon, title, and description.

Usage

svelte

<script lang="ts">
  import { Button, Dialog } from "@milandekruijf/ui/svelte";

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

<Button onclick={() => (open = true)}>Open dialog</Button>

<Dialog bind:open title="Settings" description="Update your preferences.">
  <p>Any content goes here.</p>
</Dialog>

Examples

Modal dialog

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { Button, Dialog } from "@milandekruijf/ui/svelte";

  let open = $state(false);

  const bodyClass = css({
    display: "flex",
    flexDirection: "column",
    gap: 4,
    minW: 0,
  });

  const textClass = css({
    m: 0,
    fontSize: "md",
    lineHeight: "snug",
    color: "slate.11",
  });
</script>

<Button onclick={() => (open = true)}>Open dialog</Button>

<Dialog
  bind:open
  title="Dialog"
  description="Square modal with a close icon, a title, and a description."
  closeLabel="Close"
>
  <div class={bodyClass}>
    <p class={textClass}>Put any content here.</p>
    <Button color="slate" onclick={() => (open = false)}>Done</Button>
  </div>
</Dialog>

Props

Prop	Type	Default	Description
open?	`boolean`	false	Bindable open state (`bind:open`).
title	`string`	—	Dialog heading.
description?	`string`	—	Secondary line under the title; also the accessible description.
closeLabel?	`string`	"Close"	Accessible label for the close icon.
maxWidth?	`string`	"32rem"	Max panel width; widen it for content like sidebars.
mobileDrawer?	`boolean`	true	Below the `md` breakpoint the dialog becomes a bottom-sheet drawer.
class?	`string`	—	Extra classes merged on the panel.
children	`Snippet`	—	Dialog body content.