Overlays
Popover
A non-modal panel opened from a button, for small groups of controls.
Live example
Usage
<Popover trigger="Theme" label="Theme settings">
<RadioGroup legend="Mode" options={modes} />
</Popover>Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | none | Content of the toggle button. |
label | string | none | Accessible name of the panel. |
triggerLabel? | string | none | Name for an icon-only trigger. |
open? | boolean | none | Controlled open state. |
onOpenChange? | (open: boolean) => void | none | Called when it opens or closes. |
align? | 'start' | 'end' | 'end' | Edge the panel aligns to. |
Do and don't
Do
- Use for settings or filters that relate to the trigger.
Don't
- Use for tasks that need full attention; use Dialog.
Accessibility
- Disclosure pattern: the trigger has aria-expanded and aria-controls.
- Escape closes and returns focus. Moving focus or clicking outside also closes it.
Keyboard
| Keys | Action |
|---|---|
| Enter, Space | Toggles the panel |
| Escape | Closes and returns focus to the trigger |