Components

Popover

A non-modal panel with interactive content, anchored to the button that opens it.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The panel opens below the trigger, centred on it; focus moves to the first control. The title names the panel.

import { Button, Checkbox, Popover } from '@bigbang/ui';

export default function Default() {
  return (
    <Popover trigger={<Button variant="secondary">Edit view</Button>} title="View" description="Choose the columns to show.">
      <div className="flex flex-col gap-md">
        <Checkbox label="First item" defaultChecked />
        <Checkbox label="Second item" />
        <div className="flex justify-end">
          <Popover.Close>
            <Button size="sm">Apply</Button>
          </Popover.Close>
        </div>
      </div>
    </Popover>
  );
}

With an arrow

arrow draws an arrow that ties the panel to its trigger; use it when several triggers sit close together.

import { Button, Popover } from '@bigbang/ui';

export default function WithArrow() {
  return (
    <Popover arrow align="center" size="sm" trigger={<Button variant="secondary">Edit view</Button>} title="View">
      Popover content goes here.
    </Popover>
  );
}

Light and dark mode

The panel uses color-surface-raised, a color-border-subtle ring and shadow-popup.

import { Button, Checkbox, Popover } from '@bigbang/ui';

export default function Default() {
  return (
    <Popover trigger={<Button variant="secondary">Edit view</Button>} title="View" description="Choose the columns to show.">
      <div className="flex flex-col gap-md">
        <Checkbox label="First item" defaultChecked />
        <Checkbox label="Second item" />
        <div className="flex justify-end">
          <Popover.Close>
            <Button size="sm">Apply</Button>
          </Popover.Close>
        </div>
      </div>
    </Popover>
  );
}