Your bookmarks

Popover

Keeps additional content easily accessible while not cluttering up the page.

Too much information at once overwhelms users, which is why Orbit is based around progressive disclosure. Popovers help by keeping small bits content off of the initial screen but still only a tap away.

Use them when you have only a few additional details, choices, or interactions that aren’t necessary to the main flow but still might interest users, such as adding and removing travelers. If you have larger content to convey, consider using a modal instead.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Component structure

Button: most common trigger to open popover, though other ways are possible; popover: wraps content and actions and can have a preferred position and alignment 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.