Popover component

When to use

To keep small bits content off of the initial screen but still only a tap away.
For short content or interactions that aren’t necessary to the main flow.
For content that still might interest users and can be revealed through progressive disclosure.
To add interactions or choices in the context of the current screen.

When not to use

For large and/or structured content—use a modal.
To interrupt the main flow—use a modal or dialog.
For one choice less related to the current screen—use a dialog.
For static, short information—use a tooltip.
To add hidden information to the screen itself—use a collapse.

Component status

Figma	React	iOS	Android
Released	Released	N/A	N/A

Content structure

Button: most common trigger to open popover, though other ways are possible; popover: wraps content and actions and can have a preferred placement and/or overlap the button; content: wraps the main message or options; action area: optionally creates an area for actions associated with the whole popover, at least one of which should close the popover.

Behavior

Make trigger clear

Since popovers necessarily hide information from the initial screen, users need to know how they can get to that information.

A common way to do this is a button with a chevron down icon on the right. This makes it clear that more information can pop down below the button.

Minimize actions

Popovers have limited space outside the main flow. This means they’re best for resolving single issues, not many things at once.

Focus on important actions.

A popover with the ability to add adult and child passengers and a single primary action.

Don't

Don’t include everything users can do at once.

A popover with buttons to add passenger, add special meals, and add cabin bags.

Content

Keep it simple

Popovers present extra information or choices in a limited space. Don’t overwhelm your users with information.