Dialog

Usage

import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
  DialogClose,
} from "@govtechmy/myds-react/dialog";

export default () => (
  <Dialog>
    <DialogTrigger />
    <DialogBody>
      <DialogHeader>
        <DialogTitle />
      </DialogHeader>
      <DialogContent>
        <DialogDescription />
      </DialogContent>
      <DialogFooter>
        <DialogClose />
      </DialogFooter>
    </DialogBody>
  </Dialog>
);

Examples

Trigger

Use the DialogTrigger to wrap the trigger element that opens the dialog. The example below shows three different (3) buttons opening the same dialog.

Uncontrolled vs Controlled State

To use the dialog in an uncontrolled state, set the defaultOpen prop to the initial state of the dialog.

To use the dialog in the controlled state, utilize the open and onOpenChange prop to handle the state programmatically.

Dismissible

To prevent users from dismissing the dialog, set the dismissible prop to false at DialogBody. By default, the dialog is dismissible.

You can attach a callback function to the onDismiss prop to handle the dismiss event.

Border

Border can be added to the DialogHeader and DialogFooter by setting the border prop to true.

Alignment

You can set align to DialogFooter to align the children to the start, end, or full width of the dialog. By default, the alignment is set to end.

Action

You can add special actions to the dialog by utilising the action prop on the DialogFooter.

Props

Dialog

DialogBody

DialogHeader

DialogFooter