Density

Popover

Popover composes Base UI’s popover primitives for compact floating panels tied to a trigger.

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

export default function PopoverExample() {
  return (
    <Popover
      trigger="Show metrics"
      title="Sprint health"
      description="Velocity is steady and review time is down 18% this week."
      closeLabel="Close"
    />
  );
}

Props

Prop Attribute Values Default
trigger None React node Required
title, description None React node None
children None React node None
closeLabel None React node None
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 { Popover } from "density-base-ui";
export default function PopoverEmphasisExample() {
  return (
    <div style={styles.row}>
      <Popover emphasis="primary" trigger="Primary">
        Content
      </Popover>
      <Popover emphasis="secondary" trigger="Secondary">
        Content
      </Popover>
      <Popover emphasis="outline" trigger="Outline">
        Content
      </Popover>
      <Popover emphasis="ghost" trigger="Ghost">
        Content
      </Popover>
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;

Size

import { Popover } from "density-base-ui";
export default function PopoverSizeExample() {
  return (
    <div style={styles.row}>
      <Popover size="2xs" trigger="2xs">
        Content
      </Popover>
      <Popover size="xs" trigger="xs">
        Content
      </Popover>
      <Popover size="sm" trigger="sm">
        Content
      </Popover>
      <Popover size="md" trigger="md">
        Content
      </Popover>
      <Popover size="lg" trigger="lg">
        Content
      </Popover>
      <Popover size="xl" trigger="xl">
        Content
      </Popover>
      <Popover size="2xl" trigger="2xl">
        Content
      </Popover>
      <Popover size="3xl" trigger="3xl">
        Content
      </Popover>
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;

Padding

import { Popover } from "density-base-ui";
export default function PopoverPaddingExample() {
  return (
    <div style={styles.row}>
      <Popover padding="none" trigger="None">
        None
      </Popover>
      <Popover padding="2xs" trigger="2xs">
        2xs
      </Popover>
      <Popover padding="xs" trigger="xs">
        xs
      </Popover>
      <Popover padding="sm" trigger="sm">
        sm
      </Popover>
      <Popover padding="md" trigger="md">
        md
      </Popover>
      <Popover padding="lg" trigger="lg">
        lg
      </Popover>
      <Popover padding="xl" trigger="xl">
        xl
      </Popover>
      <Popover padding="2xl" trigger="2xl">
        2xl
      </Popover>
      <Popover padding="3xl" trigger="3xl">
        3xl
      </Popover>
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;

Depth

import { Popover } from "density-base-ui";
export default function PopoverDepthExample() {
  return (
    <div style={styles.row}>
      <Popover depth="1" trigger="Depth 1">
        Content
      </Popover>
      <Popover depth="2" trigger="Depth 2">
        Content
      </Popover>
      <Popover depth="3" trigger="Depth 3">
        Content
      </Popover>
      <Popover depth="4" trigger="Depth 4">
        Content
      </Popover>
      <Popover depth="5" trigger="Depth 5">
        Content
      </Popover>
      <Popover depth="6" trigger="Depth 6">
        Content
      </Popover>
      <Popover depth="7" trigger="Depth 7">
        Content
      </Popover>
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;