Dialog

Modal windows that focus user attention on specific content or actions.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Dialog Parts

import {
  Dialog,
  DialogTrigger,
  DialogPopup,
  DialogHeader,
  DialogTitle,
  DialogBody,
  DialogDescription,
  DialogFooter,
  DialogClose
} from "components/selia/dialog";

Structure

The expected structure and composition of the component.

Anatomy

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogBody>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>

Examples

Trigger

You can pass a custom trigger element to the DialogTrigger component by using the render prop.

Icon

An icon can be added to the DialogHeader component by using the IconBox component.