Figma component
Show the component in Figma
Healthy
Show details
Overview
Key Features
- Content Variants: Supports both simple and complex content layouts.
- Customizable via slots: Content can be replaced with local components using slots
- Accessibility: Fully keyboard and screen-reader accessible
Anatomy
- Popover Container: The outer wrapper that positions and contains the popover content relative to the trigger.
- Content: The main area of the popover where interactive elements, text or actions are displayed.
- Arrow: A directional pointer visually connecting the popover to its trigger element.Variants
The popover comes with built-in variants, offering a simple option with an icon and text or a more detailed version with additional text and action buttons.
Slot
The popover component is highly flexible, allowing you to insert any customised content both in Figma and in code. This is achieved through a slot system, where you can easily replace the default slot content with any custom component of your choice.
Look and Feel
Themes
Placement
The menu’s placement can be set to the top, bottom, right, or left of its trigger, with alignment options for left, right, or center. If space is constrained, it automatically adjusts to ensure visibility on screen.
Best Practice
Do:
- Keep content concise and relevant to avoid overwhelming users.
- Use clear triggers like clicks or hover states that match the context of use.
Don’t:
- Make popovers essential for primary actions—they should be supplementary, not mandatory for navigation.
- Use popovers for persistent information that users might need to reference often.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.