Popover

When to use

Popover is for a short adjustment without leaving the page: choosing columns, a quick filter, view options.

When not to use

• For a list of actions only: Use DropdownMenu.
• For explanatory text only: Use InfoPopover.
• For a short hint on hover: Use Tooltip.
• For a long form or a decision: Use Dialog.

Anatomy

Edit view

LightDark

Copy code

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>
  );
}

1. Trigger: The button that opens the panel.
2. Panel: Raised surface, thin ring, small shadow.
3. Title and description.
4. Content: Interactive controls.
5. Arrow: Optional.

Behaviour

• Opens on trigger press and closes on a second press; the trigger carries aria-expanded.
• On open, focus moves to the first control; Escape or an outside press closes it and focus returns to the trigger.
• Flips to the other side when there is no room and stays inside the viewport.
• The page stays usable by default; modal makes it inert.

Guidelines

• Keep the content to one subject.
• Either apply changes at once or add an “Apply” button; do not mix both.
• Do not open a popover from a popover.

Content

Turkish	English
Görünüm	View
Gösterilecek sütunları seçin.	Choose the columns to show.
Uygula	Apply

Glass

Under a Provider material="glass", the panel turns glass and the arrow is hidden. material="solid" keeps it solid. Set material="solid" when the panel holds dense content, such as a table or a form with more than three fields.

Related components

• InfoPopover: A small info button for explanations.
• Tooltip: A short hint that takes no focus.
• Dialog: A modal window.