Density

Dialog

Dialog renders Base UI’s dialog primitives from one component. Pass a consumer-owned React element to trigger to open the dialog from the control that fits your flow.

import { Button, Dialog, Skeleton } from "density-base-ui";

export default function DialogExample() {
  return (
    <Dialog
      trigger={
        <Button type="button" emphasis="primary">
          Edit workspace
        </Button>
      }
      title="Edit workspace"
      subtitle="Update shared workspace settings without leaving the current view."
      dismissable
      actions={[
        { label: "Cancel" },
        { label: "Save changes", emphasis: "primary" },
      ]}
    >
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </Dialog>
  );
}

Dismiss control

Set dismissable to add a Close control alongside the dialog’s existing footer actions.

import { Button, Dialog, Skeleton } from "density-base-ui";

export default function DialogDismissableExample() {
  return (
    <Dialog
      dismissable
      trigger={<Button>Edit workspace</Button>}
      title="Edit workspace"
    >
      <Skeleton style={{ height: "3rem", width: "12rem" }} />
    </Dialog>
  );
}

Custom trigger

import { Button, Dialog, Skeleton } from "density-base-ui";

export default function DialogTriggerExample() {
  return (
    <Dialog
      trigger={
        <Button type="button" emphasis="primary">
          Manage workspace
        </Button>
      }
      title="Manage workspace"
    >
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </Dialog>
  );
}

Size

import { Button, Dialog, Skeleton, View } from "density-base-ui";

export default function DialogSizeExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <Dialog
        trigger={<Button type="button">2xs</Button>}
        size="2xs"
        title="Dialog"
        subtitle="Extra extra small"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">xs</Button>}
        size="xs"
        title="Dialog"
        subtitle="Extra small"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">sm</Button>}
        size="sm"
        title="Dialog"
        subtitle="Small"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">md</Button>}
        size="md"
        title="Dialog"
        subtitle="Medium"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">lg</Button>}
        size="lg"
        title="Dialog"
        subtitle="Large"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">xl</Button>}
        size="xl"
        title="Dialog"
        subtitle="Extra large"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">2xl</Button>}
        size="2xl"
        title="Dialog"
        subtitle="Extra extra large"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">3xl</Button>}
        size="3xl"
        title="Dialog"
        subtitle="Three extra large"
      >
        <Skeleton />
      </Dialog>
    </View>
  );
}

Actions

Use actions for footer choices in their supplied order. Action color remains independent of emphasis, so the action can keep the hierarchy appropriate to its dialog.

import { Button, Dialog, Skeleton } from "density-base-ui";

export default function DialogActionsExample() {
  return (
    <Dialog
      trigger={
        <Button type="button" emphasis="primary">
          Open dialog
        </Button>
      }
      actions={[
        { label: "Later" },
        { label: "Delete project", color: "destructive", emphasis: "primary" },
      ]}
    >
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </Dialog>
  );
}

Color

Set action color to destructive, warning, or success for semantic action color.

import { Button, Dialog, Skeleton } from "density-base-ui";

export default function DialogColorExample() {
  return (
    <Dialog
      trigger={<Button type="button">Open dialog</Button>}
      actions={[
        { label: "Keep draft" },
        { label: "Archive", color: "warning" },
        { label: "Delete", color: "destructive" },
      ]}
    >
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </Dialog>
  );
}

Padding

import { Button, Dialog, Skeleton, View } from "density-base-ui";

export default function DialogPaddingExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <Dialog
        trigger={<Button type="button">None</Button>}
        padding={false}
        title="Dialog"
        subtitle="No padding"
      >
        <Skeleton />
      </Dialog>
      <Dialog
        trigger={<Button type="button">Default</Button>}
        padding
        title="Dialog"
        subtitle="Default padding"
      >
        <Skeleton />
      </Dialog>
    </View>
  );
}