Dialog

Anatomy

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader />
    <DialogMain />
    <DialogFooter />
  </DialogContent>
</Dialog>

Usage

Compose <Dialog>, <DialogTrigger>, and <DialogContent>.

Delete Scribe

import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
} from "stylus-ui/Dialog";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Delete Scribe</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader
        title="Delete Scribe?"
        description="This action cannot be undone. All data will be deleted."
      />
      <DialogFooter
        primaryAction={{ children: "Delete", variant: "danger" }}
        secondaryAction={{ children: "Cancel" }}
      />
    </DialogContent>
  </Dialog>
);

Widths

To set the width of the dialog, pass a className to <DialogContent>. Beneath 448px, the buttons in the footer will stack vertically, with the primary button on top. There is no additional configuration required.

Provision Users

import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
} from "stylus-ui/Dialog";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Provision Users</Button>
    </DialogTrigger>
    <DialogContent className="max-w-[320px]">
      <DialogHeader
        title="Confirm user provisioning"
        description="Once user provisioning is enabled, only users in mapped groups on this page can access Scribe."
      />
      <DialogFooter
        primaryAction={{ children: "Confirm" }}
        secondaryAction={{ children: "Cancel" }}
      />
    </DialogContent>
  </Dialog>
);

Without close button

A close button will display in the top right by default. To remove it, pass hideClose to <DialogContent>.

Open Dialog

import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
} from "stylus-ui/Dialog";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader
        title="Information"
        description="This is an informational dialog. The close button is hidden."
        hideClose
      />
      <DialogFooter
        primaryAction={{ children: "Confirm" }}
        secondaryAction={{ children: "Cancel" }}
      />
    </DialogContent>
  </Dialog>
);

Scrolling

If the content of the dialog exceeds the height of the viewport, the dialog will scroll. If default scrolling interferes with other functionality or you want to implement your own scrolling, set scrollable to false.

Avoid large dialogs

Dialogs that are tall enough to require scrolling should not occur often. That being said, there may be instances where it is necessary (especially with mobile). If a dialog becomes large enough to require scroll, consider whether it should be a full page, or broken up into smaller parts.

View Terms of Service

import { faker } from "@faker-js/faker";
import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogMain,
  DialogFooter,
} from "stylus-ui/Dialog";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">View Terms of Service</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader title="Terms of Service" />
      <DialogMain>{faker.lorem.paragraphs(40)}</DialogMain>
      <DialogFooter
        primaryAction={{ children: "Accept" }}
        secondaryAction={{ children: "Decline" }}
      />
    </DialogContent>
  </Dialog>
);

Images

To add an image to the header of the dialog, pass an img object containing src and alt to <DialogHeader>.

Open Image Dialog

import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
} from "stylus-ui/Dialog";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Open Image Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader
        title="Look at this image"
        description="This is a random image from the internet."
        img={{ src: "https://picsum.photos/800/400", alt: "Random image" }}
      />
      <DialogFooter
        primaryAction={{ children: "Confirm" }}
        secondaryAction={{ children: "Cancel" }}
      />
    </DialogContent>
  </Dialog>
);

API Reference

Dialog

The root dialog component.

Prop	Type	Default
defaultOpen	boolean
modal	boolean	true
onOpenChange	(open: boolean) => void
open	boolean

DialogTrigger

A component that triggers the dialog to open when clicked.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
asChild	boolean
children	ReactNode

DialogContent

Contains content to be rendered in the open dialog.

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
className	string
scrollable	boolean	true

DialogHeader

Displays a title, optional description, and a close button. Children will render to the left of the close button.

Inherits properties from HTMLDivElement.

Prop	Type	Default
title	string
children	ReactNode
className	string
description	string
hideClose	boolean
img	{ src: string; alt: string }

DialogMain

A container for the main content of the dialog.

Inherits properties from HTMLDivElement.

Prop	Type	Default
children	ReactNode

DialogFooter

A container for the footer content of the dialog. Contains a primary action, an optional secondary action, and optional child elements. Elements display in a row on large dialogs, and a column on small dialogs.

Inherits properties from HTMLDivElement.

Prop	Type	Default
primaryAction	ButtonProps
children	ReactNode
className	string
secondaryAction	ButtonProps