Density

Alert dialog

Alert dialog renders Base UI’s alert dialog primitives from one component for confirmations that need an explicit decision.

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

export default function AlertDialogExample() {
  return (
    <AlertDialog
      trigger="Delete report"
      emphasis="primary"
      title="Delete quarterly report?"
      description="This removes the report from everyone's dashboard. This action cannot be undone."
      actions={[
        { label: "Cancel" },
        { label: "Delete report", 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? }[] Cancel
cancelLabel None React node Cancel
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 { AlertDialog } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

const actions = [
  { label: "Cancel" },
  { label: "Continue", emphasis: "primary" as const },
];

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

Size

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

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

Content

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

export default function AlertDialogContentExample() {
  return (
    <AlertDialog
      trigger="Open alert"
      title="Title"
      description="Description"
      cancelLabel="Never mind"
    >
      <p>Children content</p>
    </AlertDialog>
  );
}

Actions

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

export default function AlertDialogActionsExample() {
  return (
    <AlertDialog
      trigger="Open alert"
      actions={[{ label: "Keep" }, { label: "Delete", emphasis: "primary" }]}
    />
  );
}

Padding

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

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

Depth

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

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