Density

AlertDialog

AlertDialog renders Base UI’s alert dialog primitives from one component for confirmations that need an explicit decision. Pass a consumer-owned React element to trigger to open it from the control that fits your flow.

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

export default function AlertDialogExample() {
  return (
    <AlertDialog
      trigger={
        <Button type="button" emphasis="primary">
          Delete report
        </Button>
      }
      title="Delete quarterly report?"
      subtitle="This removes the report from everyone's dashboard. This action cannot be undone."
      dismissable
      actions={[{ label: "Delete report", color: "destructive" }]}
    />
  );
}

Dismiss control

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

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

export default function AlertDialogDismissableExample() {
  return (
    <AlertDialog
      actions={[{ label: "Delete report", color: "destructive" }]}
      dismissable
      title="Delete quarterly report?"
      trigger={<Button>Delete report</Button>}
    />
  );
}

Size

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

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

Content

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

export default function AlertDialogContentExample() {
  return (
    <AlertDialog
      trigger={<Button type="button">Open alert</Button>}
      title="Title"
      subtitle="Subtitle"
      closeLabel="Never mind"
    >
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </AlertDialog>
  );
}

Actions

Use actions for footer choices in their supplied order. Set the destructive confirmation’s color explicitly.

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

export default function AlertDialogActionsExample() {
  return (
    <AlertDialog
      trigger={<Button type="button">Open alert</Button>}
      title="Delete project?"
      subtitle="This action cannot be undone."
      actions={[{ label: "Keep" }, { label: "Delete", color: "destructive" }]}
    />
  );
}

Color

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

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

export default function AlertDialogColorExample() {
  return (
    <AlertDialog
      trigger={<Button type="button">Open alert dialog</Button>}
      title="Publish changes?"
      subtitle="This will make the preview visible to the whole team."
      actions={[
        { label: "Review again", color: "warning" },
        { label: "Publish", color: "success", emphasis: "primary" },
      ]}
    />
  );
}

Padding

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

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