Skip to content
Site volume
Colourway

Components

Popover

A small plate that opens from a key with a few words or controls, and closes on Escape.

  • Experimental
  • Reading layer
  • Client leaf
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/popover
On this page

Popover opens a small raised plate from a key: a title, a line or two, perhaps a control. Focus moves into it on open and back to the key on close; Escape and a press outside close it. For a list of actions use Menu; for a single line that repeats a control's name use Tooltip.

Example#

Look of this example
Live render of examples/popover/basic.tsx

Usage#

Use a popover for a few words or a small control that people open on purpose: why a price moved, a short definition, a quick setting. Focus moves into it on open and back to its key on close.

  • Parts. Popover with a PopoverTrigger (a Button) and a PopoverContent holding an optional title, a description and any children. closeButton adds a quiet close key.
  • Closing. Escape and a press outside close it; a PopoverClose can close it from inside.
  • A list of actions is a Menu. One line that repeats a control's name is a Tooltip. Anything long or with a form is a Dialog or a Drawer.

Anatomy#

The parts of examples/popover/anatomy.tsx, numbered:
  1. PlateRaised surface, 2 px rule, at most 360 px wide..mk-popover-popup
  2. HeadThe title and the close key.data-mk-part="head"
  3. DescriptionOne or two sentences in body UI type..mk-popover-description
  4. Close keyA quiet small IconButton named Close..mk-popover-close

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The trigger asks the question the popover answers: "Why this price?"
  • The title restates it as a statement; the description answers it in one or two sentences.
  • No essays: if it needs a heading and paragraphs, it needs a page or a dialog.

Do and don't#

Do

A short answer, opened on purpose.

Don't

A popover holding a six-field contact form.

A form in a popover closes on one stray click.

A press outside closes a popover, which is right for a note and wrong for typed work. Forms go in a Dialog or a Drawer, where closing is deliberate.

Accessibility#

  • The popup is a dialog named by its title and described by its description.
  • It portals to the body with its trigger's theme, colourway, stock, plate and contrast (20 §1.9).
  • Fades and grows from .96 in 140 ms; reduced motion keeps the fade.
KeysWhat happens
EnterorSpaceOn the trigger: opens the popover and moves focus into it
TabMoves through the popover's controls
EscapeCloses it; focus returns to the trigger

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-text--mk-surface-raiseduinot in this looknot in this look
--mk-text-2--mk-surface-raiseduinot in this looknot in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
openbooleannone
defaultOpenbooleannone
onOpenChange((open: boolean) => void)none
children requiredReactNodenone

Generated from PopoverProps in packages/overprint-react/src/reading/popover/popover.tsx.

Tokens#

System tokens (20)

Scanned from its CSS at build and checked against its registry entry; 5 read but not declared there.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • MinorreactCombobox and ComboboxItem (a case- and accent-insensitive filter by default, groups, chips for multiple, "Searching…", an empty message, a live result count, and inline for a list printed in place), Popover with PopoverTrigger, PopoverContent and PopoverClose, Menu with its eleven parts (shortcuts as Kbd caps, checkbox and radio items, group labels, separators, submenus), and ToastProvider with useToast (a slab pill, one at a time with three waiting, 5.2 s with a drain bar that holds while the region is hovered, focused or the window is away). Read the whole entry
  • Patchreact, threeCombobox gives its inline list an id and the input's name in the server markup and marks its box as the input's focus-ring host, and a highlighted row's second line prints in --mk-text; the EmptyState and Popover descriptions print in the meta role (16 px, 500, so --mk-text-2 clears the APCA floor); SplashTitle's Quiet heading prints on its own paper plate and wraps inside its cell; the Toast viewport and specimen keep one column no wider than their box; ProofSheet's frame links draw the focus ring. Read the whole entry