Components / overlay

overlay · @awesome-ds/react

Popover

Lightweight non-modal disclosure.

Rules: rule.a11y.wcag-aa

State matrix

openrequired
closedrequired

Anatomy

  • disclosure trigger
  • non-modal popover surface
  • content

Keyboard contract

Enter or Space opens; Escape closes and restores trigger focus.

Screen-reader contract

Trigger exposes expanded state and the popover content follows it in reading order.

Content rules

  • Keep content brief and contextual.
  • Do not hide essential workflow steps inside.

Public API

PropTyperequiredDescription
labelstringrequiredTrigger name
childrenReactNoderequiredPopover content

Adaptation contracts

RTL
Use logical action alignment and preserve the safe primary/cancel reading order.
High contrast
Separate overlay, surface, focus, and actions with system-color boundaries.
Reduced motion
Open and close instantly or with opacity only; focus timing remains deterministic.

Verification IDs

Popover/escape-dismiss

Live

Live

Copyable example

import { Popover } from "@awesome-ds/react";

<Popover label="More">Details</Popover>