BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Dialog

Stable
Edit in Studio

A modal window for a short, focused task that must be finished or cancelled before the user goes back to the page: rename a token, invite a reviewer, review a release.

Updated Oct 16, 2026

Rendered with the real component
Light
Dark

When to use

Use it for

  • A task of one to three fields that belongs to the current page and needs the user's full attention.
  • Reviewing something before committing it, like release notes before Publish.
  • Size sm for one field, md (default) for short forms, lg for reading or comparing content.

Not for

  • Confirming a destructive action: use AlertDialog, which cannot be dismissed by clicking outside.
  • Details the user wants to read next to the page, like a token's history: use Drawer.
  • A hint or a small menu anchored to a control: use Popover or Menu.
  • Long multi-step flows: give them a page. Stacked dialogs lose people.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Do

Title says the task, the primary button repeats the verb

"Rename token" opens a dialog titled "Rename token" whose primary action is "Rename token". Users always know where they are.

Do

Keep the footer for actions only

Alternatives first, primary last, aligned to the end. Explanations go in the description or the body.

Don't

A dialog for information the page could show inline

Interrupting to say "Saved" costs a click. Use a Toast or an inline Alert.

Don't

Vague footer labels

"OK" and "Yes" make users reread the title to know what they agree to.

Accessibility

  • Base UI Dialog: role dialog, aria-modal, named by the title and described by the description.
  • Focus moves into the dialog when it opens (the first focusable element, or initialFocus) and is trapped there.
  • Escape, the close button and a click on the scrim close it; focus returns to the trigger.
  • The page behind is inert and scroll is locked while the dialog is open.
  • The body scrolls on its own when content is long, so the title and the actions stay visible.
  • Motion is a 200ms fade and a slight rise; with reduced motion it appears instantly.

Anatomy and tokens

Read from packages/react/src/components/Dialog/Dialog.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

33 tokens 16 semantic or component, change with theme and brand 2 density, change with comfortable or compact 15 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Dialog/Dialog.tsx, so this table cannot drift from the code.

Prop Type Default Description
open boolean none Controlled open state.
defaultOpen boolean none Initial open state when uncontrolled.
onOpenChange (open: boolean) => void none Called when the dialog opens or closes (Escape, scrim click, close button, DialogClose).
disablePointerDismissal boolean false Keep the dialog open when the user clicks the scrim. Use for forms with unsaved input.
children ReactNode none DialogTrigger and DialogContent.

Playground

Dialog has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.

Light
Dark

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Dialog in Storybook) .

Embed Storybook stories here (4)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

LongContent

Controlled

AllStates

Changelog

  • New

    Owner override for solo maintainers and small teams. `governance.override` in `bridge.config.json` (`allowed`, `requireReason`, `minReasonLength`; absent by default) lets listed logins merge from Reviews when the only thing missing is approvals. It is never offered while CI fails or runs, when changes are requested, or on a draft. Bridge checks the token has write access, asks for a reason in a confirmation dialog, posts a `**Bridge owner override**` comment with the login, reason and missing approvals, then merges with the method the repo allows. If GitHub refuses, its message is shown and the comment is marked not merged.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items). Every popup carries the theme, brand and density scope. Adds menu and drawer component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes