Popover

A small panel attached to a button, for extra controls or details that do not need the whole screen. Prefer it to a Modal when the page should stay in view.

Popover

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Popover

Dark theme, Popover

High contrast theme, Popover

UsageLink to the section Usage

tsx

import { Popover } from '@skribly/ui/overlays'

tsx

<Popover trigger={<Button>Share</Button>} title="Share this page">
  {(close) => <Button onPress={close}>Copy link</Button>}
</Popover>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The trigger reports aria-expanded.
The panel is a dialog named by its title, or by label when it has none.
Focus moves in and returns to the trigger on Escape or a click outside.
It never grows wider than the screen.

This demo runs through axe in all three themes on every test run. See what the tests check.