A click-triggered overlay anchored to a button or trigger element. Use it for secondary actions, inline confirmations, or supplementary information that does not warrant a full dialog. For hover previews use HoverCard, for brief helper text use Tooltip.
ts
| Guidance | Practices |
|---|---|
| Do | Keep popover content focused on a single task or piece of information. |
| Do | Provide a clear way to close: either by clicking outside or with an explicit close button. |
| Don't | Nest popovers inside other popovers; it creates confusing focus and navigation. |
| Don't | Use a popover for content that requires heavy user input; use a Dialog instead. |
| Don't | Put too much content in a popover; if it needs scrolling, use a Dialog instead. |
Inline confirmation popover for destructive actions with delete and cancel buttons.
Popover displaying a list of keyboard shortcuts with key and description pairs.
Popover with toggle switches for managing user preferences like notifications, dark mode, and sounds.