Dialog

Anatomy

// Option 1: DialogCard (recommended)
<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogCard />
  </DialogContent>
</Dialog>

// Option 2: Manual layout
<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    <DialogFooter />
  </DialogContent>
</Dialog>

Usage

For most use cases, you can use <DialogCard> to display a dialog with a title, description, and optional icon. Compose <Dialog>, <DialogTrigger>, <DialogContent>, and <DialogCard>.

Delete Scribe

import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogCard,
} from "stylus-ui/Dialog";
import { faExclamationTriangle } from "@fortawesome/pro-duotone-svg-icons";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Delete Scribe</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogCard
        title="Delete Scribe?"
        description="This action cannot be undone."
        icon={faExclamationTriangle}
        variant="warning"
        primaryActionProps={{ children: "Delete" }}
        secondaryActionProps={{ children: "Cancel" }}
      />
    </DialogContent>
  </Dialog>
);

Orientation

To display the icon above the content and center text, set orientation to "vertical". It’s recommended to also set actionDirection to "center" or "stacked".

Delete Scribe

import { Button } from "stylus-ui/Button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogCard,
} from "stylus-ui/Dialog";
import { faExclamationTriangle } from "@fortawesome/pro-duotone-svg-icons";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Delete Scribe</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogCard
        title="Delete Scribe?"
        description="This action cannot be undone."
        icon={faExclamationTriangle}
        variant="warning"
        primaryActionProps={{ children: "Delete" }}
        secondaryActionProps={{ children: "Cancel" }}
        orientation="vertical"
        actionDirection="center"
      />
    </DialogContent>
  </Dialog>
);

Widths

To set the width of the dialog, pass a className to <DialogContent>.

Provision Users

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

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Provision Users</Button>
    </DialogTrigger>
    <DialogContent className="max-w-[320px]" hideClose>
      <DialogCard
        title="Confirm user provisioning"
        description="Once user provisioning is enabled, only users in mapped groups on this page can access Scribe."
        primaryActionProps={{ children: "Confirm" }}
        secondaryActionProps={{ children: "Cancel" }}
        actionDirection="stacked"
      />
    </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,
  DialogCard,
} from "stylus-ui/Dialog";

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent hideClose>
      <DialogCard
        title="Information"
        description="This is an informational dialog card."
        primaryActionProps={{ children: "Confirm" }}
        secondaryActionProps={{ children: "Cancel" }}
      />
    </DialogContent>
  </Dialog>
);

Footer background

To display a well background in the footer, set variant to "well" in <DialogFooter>.

Open Dialog

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

export default () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="secondary">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogCard
        title="Information"
        description="This is an informational dialog card."
      />
      <DialogFooter
        variant="well"
        primaryActionProps={{ children: "Confirm" }}
        secondaryActionProps={{ 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
hideClose	boolean
img	string
imgAltText	string

DialogHeader

A container for DialogTitle and DialogDescription.

Prop	Type	Default
className	string

DialogTitle

Inherits properties from HTMLHeadingElement.

Prop	Type	Default
className	string

DialogDescription

Inherits properties from HTMLParagraphElement.

Prop	Type	Default
className	string

DialogFooter

Inherits properties from HTMLDivElement.

Prop	Type	Default
actionDirection	"left""right""center""stacked"	"right"
className	string
orientation	"horizontal""vertical"	"horizontal"
primaryActionProps	ButtonProps
secondaryActionProps	ButtonProps
variant	"default""well"	"default"

DialogCard

Composes DialogHeader, DialogTitle, DialogDescription, and DialogFooter into a single component with a predefined layout.

Prop	Type	Default
title	string
actionDirection	"left""right""center""stacked"	"right"
className	string
description	stringReactNode
icon	IconDefinition
orientation	"horizontal""vertical"	"horizontal"
primaryActionProps	ButtonProps
secondaryActionProps	ButtonProps
variant	"info""destructive""warning""success"