💠 Popover

Displays rich content in a portal, triggered by a button.

Usage

The Popover component is used to display content in a small overlay that floats over the main content. It is typically anchored to another element, such as a button, and appears in response to a user action like a click or hover.

Popovers can contain a wide variety of content, including forms, menus, or informational text.

When to use

• Contextual information: Use a Popover to provide additional information or context that is directly related to the triggering element, such as explanations of complex terms or features.
• Additional actions or options: Employ a Popover to present additional actions or settings that are secondary to the main workflow, such as advanced options for an item in a list.
• Interactive content: Utilize a Popover for interactive content like forms, calendars, or color pickers that users can engage with without leaving the current context.
• Space-saving: A Popover is ideal for conserving space on the main canvas by temporarily housing content that doesn't need to be visible at all times.

Avoid using Popovers for content that should be accessible at all times or for critical actions that users need to perform regularly. Popovers should not be overused, as they can clutter the interface and confuse users if they appear too frequently or unexpectedly. Additionally, ensure that Popovers do not obscure important content or become a hindrance to users' primary tasks.

Examples

Default

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Dialog WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions