Skip to content

← All components

Navigation and interaction

Dialog

Modal dialog using the native dialog element.

Live example

Confirm change

Review the details before continuing.

This uses the platform dialog element.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Dialog } from "@cofob/design-system-react";

/**
 * Complete Dialog parameter reference.
 * @param open/defaultOpen
 *   type: boolean; controlled or initial state
 *   default: false
 *   example: true
 * @param onOpenChange
 *   type: (open: boolean) => void
 *   default: —
 *   example: {handleOpenChange}
 * @param trigger
 *   type: ReactNode | Svelte snippet with trigger controls
 *   default: —
 *   example: <Button>Open</Button> / trigger snippet
 * @param triggerLabel
 *   type: string
 *   default: "Open dialog"
 *   example: "Accessible label"
 * @param title
 *   type: string | renderable content
 *   required
 *   example: "Delete draft?"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "This action cannot be undone."
 * @param footer
 *   type: ReactNode | Svelte snippet
 *   default: —
 *   example: <Button>Confirm</Button> / footer snippet
 * @param closeLabel
 *   type: string
 *   default: "Close dialog"
 *   example: "Accessible label"
 * @param dialog attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function DialogExample() {
  return (
    <Dialog trigger="Open" title="Confirm">Content</Dialog>
  );
}

Svelte

svelte
<script lang="ts">
  import { Dialog } from "@cofob/design-system-svelte";

  // Complete Dialog parameter reference.
  // open/defaultOpen
  //   type: boolean; controlled or initial state
  //   default: false
  //   example: true
  // onOpenChange
  //   type: (open: boolean) => void
  //   default: —
  //   example: {handleOpenChange}
  // trigger
  //   type: ReactNode | Svelte snippet with trigger controls
  //   default: —
  //   example: <Button>Open</Button> / trigger snippet
  // triggerLabel
  //   type: string
  //   default: "Open dialog"
  //   example: "Accessible label"
  // title
  //   type: string | renderable content
  //   required
  //   example: "Delete draft?"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "This action cannot be undone."
  // footer
  //   type: ReactNode | Svelte snippet
  //   default: —
  //   example: <Button>Confirm</Button> / footer snippet
  // closeLabel
  //   type: string
  //   default: "Close dialog"
  //   example: "Accessible label"
  // dialog attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Dialog title="Confirm">{#snippet trigger({ open })}<Button onclick={open}>Open</Button>{/snippet}Content</Dialog>

HTML

html
<!--
  Complete Dialog parameter reference.
  open/defaultOpen
    type: boolean; controlled or initial state
    default: false
    example: true
  onOpenChange
    type: (open: boolean) => void
    default: —
    example: {handleOpenChange}
  trigger
    type: ReactNode | Svelte snippet with trigger controls
    default: —
    example: <Button>Open</Button> / trigger snippet
  triggerLabel
    type: string
    default: "Open dialog"
    example: "Accessible label"
  title
    type: string | renderable content
    required
    example: "Delete draft?"
  description
    type: string | renderable content
    default: —
    example: "This action cannot be undone."
  footer
    type: ReactNode | Svelte snippet
    default: —
    example: <Button>Confirm</Button> / footer snippet
  closeLabel
    type: string
    default: "Close dialog"
    example: "Accessible label"
  dialog attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<dialog class="cf-dialog" data-cf-dialog>Content</dialog>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
open/defaultOpenboolean; controlled or initial statefalseReact · Svelte · HTMLtrueUse open/bind:open for controlled state or defaultOpen for initial state.
onOpenChange(open: boolean) => void—React · Svelte · HTML{handleOpenChange}Reports every user-driven open state transition.
triggerReactNode | Svelte snippet with trigger controls—React · Svelte · HTML<Button>Open</Button> / trigger snippetTrigger content; Svelte snippets receive accessible trigger controls.
triggerLabelstring"Open dialog"React · Svelte · HTML"Accessible label"Fallback accessible name when trigger content has no text.
titlerequiredstring | renderable contentrequiredReact · Svelte · HTML"Delete draft?"Primary heading or accessible title.
descriptionstring | renderable content—React · Svelte · HTML"This action cannot be undone."Supporting explanatory content.
footerReactNode | Svelte snippet—React · Svelte · HTML<Button>Confirm</Button> / footer snippetOptional dialog action area.
closeLabelstring"Close dialog"React · Svelte · HTML"Accessible label"Accessible name for the dialog or toast close button.
dialog attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.