A popover holds a few controls or a short explanation next to what triggered it. It is a moment, so it is not deep-linked and it closes on an outside press. If it needs more than a few controls, use a dialog or a drawer.
Read from the component manifest, so this is the component’s own contract. See Overlays for layers, stacking and dismissal shared by all layers.
| Stage | beta |
|---|
| Keyboard | - Enter, Space or Down on the trigger opens it
- Tab moves through its controls
- Escape closes it and returns focus to the trigger
|
|---|
| Dismissal | - escape: yes
- outside press: yes
- close button: optional
- back gesture: yes
|
|---|
| Stacking | Sits above dialogs (z-popover), so it works inside one; it is a moment, never a deep link; a modal never opens from it. |
|---|
| Accessibility | role="dialog" named by its title or label, non-modal. Focus moves in on open and returns to the trigger on close; Escape closes it; Tab leaves it and an outside press closes it. For help a touch or screen-reader user needs and that is only text, use Toggletip.
|
|---|
| Pattern | MDN: dialog role |
|---|
| Docs | Storybook |
|---|
| Stage | beta |
|---|
| Accessibility | - Named by
title (a heading) or by label.
|
|---|
| Docs | Storybook |
|---|
| Stage | beta |
|---|
| Accessibility | - Gets
aria-haspopup="dialog" and aria-expanded.
|
|---|
| Docs | Storybook |
|---|
