Anatomy
- Container: The visual wrapper that provides the popover's background, borders, and shadow styling.
- Content: The container area where popover content is displayed. Can contain text, interactive elements, and structured information.
Usage Guidelines
When to use this component
- To show supplemental information that provides context or additional details without navigating away from the current page.
- To display interactive elements like buttons, links, or form controls in an overlay that doesn't block the entire interface.
- To house secondary actions or options that don't warrant permanent space in the main interface.
When not to use this component
- For essential information required to complete a task. It can be unnoticed.
- For multi-step processes or forms that require significant input. Use modals or dedicated pages instead.
- For basic help text or simple descriptions in inputs or similar components. Display this information in an inline format.
Best Practices
Expose a small amount of additional functionality or information to the user.
Don't use the popover if content can be shown directly or if the information is vital for using the screen.
Use buttons or elements that users expect to be clickable as triggers.
Don't use links or non-interactive elements (icons, text, images) as triggers.
Don't use popovers for simple labeling i.e. providing a label for the icon button. Use Tooltip instead.
Focus on one context or functionality only.
Don't nest popovers inside each other.
Use edge-to-edge dividers to separate sections inside.
Don't resize the popover arbitrarily. Adjust its dimensions to the content inside.
General Component Behaviors
Positioning
The popover should always be placed next to the trigger and aligned to one of its edges.
Trigger slot
This area is designated for the trigger. When clicked or hovered, a popover will open.
Content slot
This area is designated for the content of the popover.
Responsive Behavior
Mobile bottom sheet transformation
On mobile devices, popovers automatically transform into bottom sheets that slide up from the bottom of the screen, providing better usability and touch interaction on smaller screens.
States
Content Guidelines
For further information, see the Content Styleguide.
Known Gaps
- Component improvements:
- Simplify its management in Figma’s library
- Align the positioning prop between Figma and Storybook
- Accessibility guidelines