OVERLAYS / COMPONENTS
Popover
Keep a small task near its trigger.
About popover
Use for a short contextual interaction. Choose a modal for a task requiring sustained attention.
Anatomy
Shared parts, named consistently.
- 1Trigger
A named, keyboard-operable interaction with visible focus and state feedback.
- 2Surface
Defines the component boundary, grouping, and visual hierarchy.
- 3Heading
Names the component, action, or content. Keep it clear and persistent.
- 4Content
Content or structure that supports the component’s purpose and reading order.
- 5Close action
A named, keyboard-operable interaction with visible focus and state feedback.
Try the default
A working example with the shared V1 visual language.
When to use
Use for a short contextual interaction. Choose a modal for a task requiring sustained attention.
Enter opens; Tab moves through content; Escape closes and restores focus.