Density

Dialog

Dialog renders Base UI’s dialog primitives from one component with trigger, content, and action props.

import { Dialog } from "density-base-ui";

export default function DialogExample() {
  return (
    <Dialog
      trigger="Open dialog"
      title="Edit workspace"
      description="Update shared workspace settings without leaving the current view."
      actions={[
        { label: "Cancel" },
        { label: "Save changes", emphasis: "primary" },
      ]}
    />
  );
}

Props

Prop Attribute Values Default
trigger None React node Required
title, description None React node None
children None React node None
actions None { label, emphasis? }[] Close
closeLabel None React node Close
presentation data-dn-presentation button button
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
popupPresentation data-dn-presentation overlay overlay
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1

Emphasis

import { Dialog } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DialogEmphasisExample() {
  return (
    <ExampleRow>
      <Dialog trigger="Primary" emphasis="primary" />
      <Dialog trigger="Secondary" emphasis="secondary" />
      <Dialog trigger="Outline" emphasis="outline" />
      <Dialog trigger="Ghost" emphasis="ghost" />
    </ExampleRow>
  );
}

Size

import { Dialog } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DialogSizeExample() {
  return (
    <ExampleRow>
      <Dialog trigger="2xs" size="2xs" />
      <Dialog trigger="xs" size="xs" />
      <Dialog trigger="sm" size="sm" />
      <Dialog trigger="md" size="md" />
      <Dialog trigger="lg" size="lg" />
      <Dialog trigger="xl" size="xl" />
      <Dialog trigger="2xl" size="2xl" />
      <Dialog trigger="3xl" size="3xl" />
    </ExampleRow>
  );
}

Content

import { Dialog } from "density-base-ui";

export default function DialogContentExample() {
  return (
    <Dialog
      trigger="Open dialog"
      title="Title"
      description="Description"
      closeLabel="Dismiss"
    >
      <p>Children content</p>
    </Dialog>
  );
}

Actions

import { Dialog } from "density-base-ui";

export default function DialogActionsExample() {
  return (
    <Dialog
      trigger="Open dialog"
      actions={[{ label: "Later" }, { label: "Save", emphasis: "primary" }]}
    />
  );
}

Padding

import { Dialog } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DialogPaddingExample() {
  return (
    <ExampleRow>
      <Dialog trigger="None" padding="none" />
      <Dialog trigger="2xs" padding="2xs" />
      <Dialog trigger="xs" padding="xs" />
      <Dialog trigger="sm" padding="sm" />
      <Dialog trigger="md" padding="md" />
      <Dialog trigger="lg" padding="lg" />
      <Dialog trigger="xl" padding="xl" />
      <Dialog trigger="2xl" padding="2xl" />
      <Dialog trigger="3xl" padding="3xl" />
    </ExampleRow>
  );
}

Depth

import { Dialog } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DialogDepthExample() {
  return (
    <ExampleRow>
      <Dialog trigger="Depth 1" depth="1" />
      <Dialog trigger="Depth 2" depth="2" />
      <Dialog trigger="Depth 3" depth="3" />
      <Dialog trigger="Depth 4" depth="4" />
      <Dialog trigger="Depth 5" depth="5" />
      <Dialog trigger="Depth 6" depth="6" />
      <Dialog trigger="Depth 7" depth="7" />
    </ExampleRow>
  );
}