Dialog

A modal surface for focused, blocking tasks.

#Import

import { Dialog, DialogToggle, DialogContent, DialogClose } from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Dialog>
  <DialogToggle>Open dialog</DialogToggle>
  <DialogContent>
    <h2>Delete project?</h2>
    <p>This action cannot be undone.</p>
    <DialogClose>Cancel</DialogClose>
  </DialogContent>
</Dialog>

#Preview

<Dialog>
  <DialogToggle>Open dialog</DialogToggle>
  <DialogContent>
    <h2>Delete project?</h2>
    <p>This action cannot be undone.</p>
    <DialogClose>Cancel</DialogClose>
  </DialogContent>
</Dialog>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Hidden close control

<DialogContent hideClose>...</DialogContent>

#Outside click

<DialogContent outEvent>...</DialogContent>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.