Dialog

Public Dialog export.

Calling it as a component (<Dialog open onClose ...>) renders the Tungsten

sugar wrapper (the DialogRoot defined above).

Reading static properties (Dialog.Trigger, Dialog.Content, etc.) reaches

straight through to the underlying Radix primitives for consumers who need

the full compound API.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Dialog } from '@hey-mike/tungsten';

import { Dialog } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/dialog/page.tsx

'use client';

import { Dialog } from '@hey-mike/tungsten';

export default function DialogSnapshot() {
  return (
    <main
      data-testid="snapshot-root"
      className="bg-page text-ink-1 min-h-screen p-8"
    >
      <h1 className="text-ink-2 mb-6 font-mono text-sm uppercase tracking-widest">
        Dialog
      </h1>
      <Dialog
        open
        onClose={() => undefined}
        title="Dialog title"
        description="Dialog body content goes here."
      >
        <p className="text-ink-2">Additional dialog content for context.</p>
      </Dialog>
    </main>
  );
}

'use client';

import { Dialog } from '@hey-mike/tungsten';

export default function DialogSnapshot() {
  return (
    <main
      data-testid="snapshot-root"
      className="bg-page text-ink-1 min-h-screen p-8"
    >
      <h1 className="text-ink-2 mb-6 font-mono text-sm uppercase tracking-widest">
        Dialog
      </h1>
      <Dialog
        open
        onClose={() => undefined}
        title="Dialog title"
        description="Dialog body content goes here."
      >
        <p className="text-ink-2">Additional dialog content for context.</p>
      </Dialog>
    </main>
  );
}

Props

Surface specific to <Dialog />.

Prop	Type	Default	Description
open*	`boolean`	—	—
onClose*	`() => void`	—	—
title	`string \| ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	—
description	`string \| ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	—
className	`string`	—	Optional class on the dialog content surface (the flat panel). Note: overriding `p-*` removes the `pr-14` clearance reserved for the close button.
unpadded	`boolean`	`false`	Drop the panel's default `p-5` padding so children render edge-to-edge. Use for surfaces that own their internal spacing (e.g. CommandPalette, whose search input + list span the full width). The padding is OMITTED conditionally — not overridden by a conflicting `p-0`, which would lose the cascade to `.p-5` by Tailwind's source order.
hideCloseButton	`boolean`	`false`	Suppress the absolute close button (the X at the top-right). Use for surfaces that carry their own dismiss affordance and where the X would overlap header content — e.g. CommandPalette, whose search input runs the full panel width and whose ⌘K / Escape already close it. ESC and overlay-click dismissal (via `onClose`) are unaffected.
aria-labelledby	`string`	—	Standard ARIA — when the consumer labels the dialog via an existing heading inside `children` (e.g. `aria-labelledby="my-heading"` with a matching `<h2 id="my-heading">`), Dialog auto-detects the heading and renders a visually-hidden `<DialogTitle>` so Radix's accessibility contract is satisfied without forcing consumers to duplicate the heading via the `title` prop. When `title` is also provided, `title` wins; `aria-labelledby` is ignored.

Sub-components

Composition slots re-exported from the same module.

nestedModalZ

No library-specific props. Pass through standard HTML attributes for the underlying element.

ModalDepthProvider