Density

Popover

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

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

export default function PopoverExample() {
  return (
    <Popover
      trigger={
        <Button type="button" emphasis="primary">
          Show metrics
        </Button>
      }
      title="Sprint health"
      subtitle="Velocity is steady and review time is down 18% this week."
      closeLabel="Close"
      dismissable
    >
      <Skeleton style={{ height: "5rem", width: "100%" }} />
    </Popover>
  );
}

Dismiss control

Set dismissable to add a Close control alongside a text Close action when one is provided.

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

export default function PopoverDismissableExample() {
  return (
    <Popover
      dismissable
      trigger={<Button>Show metrics</Button>}
      title="Sprint health"
    >
      <Skeleton style={{ height: "3rem", width: "12rem" }} />
    </Popover>
  );
}

Size

import { Button, Popover, Skeleton, View } from "density-base-ui";
export default function PopoverSizeExample() {
  return (
    <View gap="md" orientation="horizontal" padding={false} wrap>
      <Popover
        size="2xs"
        trigger={<Button type="button">2xs</Button>}
        title="2xs popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="xs"
        trigger={<Button type="button">xs</Button>}
        title="xs popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="sm"
        trigger={<Button type="button">sm</Button>}
        title="sm popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="md"
        trigger={<Button type="button">md</Button>}
        title="md popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="lg"
        trigger={<Button type="button">lg</Button>}
        title="lg popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="xl"
        trigger={<Button type="button">xl</Button>}
        title="xl popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="2xl"
        trigger={<Button type="button">2xl</Button>}
        title="2xl popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
      <Popover
        size="3xl"
        trigger={<Button type="button">3xl</Button>}
        title="3xl popover"
        subtitle="Compact overlay content."
      >
        <Skeleton />
      </Popover>
    </View>
  );
}

Padding

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

export default function PopoverPaddingExample() {
  return (
    <View gap="md" orientation="horizontal" padding={false} wrap>
      <Popover padding={false} trigger={<Button type="button">None</Button>}>
        <Skeleton />
      </Popover>
      <Popover
        trigger={<Button type="button">Padding enabled</Button>}
        title="Padding enabled"
        subtitle="Popover content with padding."
      >
        <Skeleton />
      </Popover>
    </View>
  );
}