Components

Dialog

A modal window over the page that holds focus for one task or decision.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Dialog } from '@bigbang/ui';
Source: Dialog.tsx
Storybook: Dialog · Playground

Dialog is in the @bigbang/ui package.

import { Button, Dialog } from '@bigbang/ui';

<Dialog
  trigger={<Button>Open dialog</Button>}
  title="Dialog title"
  description="Dialog description goes here."
  footer={
    <>
      <Dialog.Close>
        <Button variant="secondary">Cancel</Button>
      </Dialog.Close>
      <Button>Save</Button>
    </>
  }
>
  Body content
</Dialog>;

The part prop types are exported too: DialogCloseProps.

Props

titleRequired

Description: Heading of the dialog; it names the dialog for screen readers. Required.
Type: ReactNode

description

Description: One or two sentences under the title; read together with the title when the dialog opens.
Type: ReactNode

children

Description: Content of the dialog body. It scrolls when it is taller than the viewport; the header and footer stay in place.
Type: ReactNode

trigger

Description: The element that opens the dialog, usually a Button. Leave it out to control the dialog with open.
Type: ReactElement

size

Description: Panel width: 400, 560, 720 or 960 px; full fills the viewport inside its margin. Below 640 px of viewport width a dismissible dialog becomes a bottom sheet.
Type: DialogSize
Default: 'md'

dismissible

Description: Lets people close the dialog with Escape, a press outside it or the close button. Turn it off only for a forced decision, such as an ended session; then a footer action must close it.
Type: boolean
Default: true

open

Description: Controlled open state. Pass it with onOpenChange.
Type: boolean

defaultOpen

Description: Open state on first render when the dialog is uncontrolled.
Type: boolean
Default: false

onOpenChange

Description: Called with the new open state when the trigger, Escape, an outside press or a close button changes it.
Type: (open: boolean) => void

initialFocus

Description: Element that receives focus when the dialog opens. By default the first focusable element in the body, then the footer.
Type: RefObject<HTMLElement | null>

closeLabel

Description: Accessible name of the close button. Defaults to the ui.dialog.close library string ("Kapat" or "Close").
Type: string

material

Description: 'solid' keeps the dialog solid under a glass Provider. Set it for long text, a form with more than three fields or a consent block; glass suits short confirmations.
Type: 'auto' | 'solid'
Default: 'auto'

Parts

Dialog.Close: wraps one Button and closes the dialog when it is pressed.
Parts for a layout the props do not cover: Dialog.Root (trigger, open state, dismissible), Dialog.Popup (size, dismissible, closeLabel, initialFocus), Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body, Dialog.Footer. They look and behave as the props API does; every dialog has one Dialog.Title.

<Dialog.Root trigger={<Button>Preview</Button>}>
  <Dialog.Popup size="xl">
    <Dialog.Header>
      <Dialog.Title>Bulk refund preview</Dialog.Title>
      <Dialog.Description>The transactions to refund are listed below.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>…</Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close>
        <Button variant="secondary">Cancel</Button>
      </Dialog.Close>
      <Button>Refund</Button>
    </Dialog.Footer>
  </Dialog.Popup>
</Dialog.Root>;

Data attributes

data-component="dialog", data-size, data-dismissible: on the panel.
data-part: backdrop, header, body, footer.
data-open, data-starting-style, data-ending-style, data-nested-dialog-open: from Base UI.