Developer mode
Opens components on the React tab by default.
Your bookmarks


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

Web (React)
iOS (Swift)
Android (Kotlin)

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.


Keep it simple       

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

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.

import Button from "@kiwicom/orbit-components/lib/Button";
import ChevronDown from "@kiwicom/orbit-components/lib/icons/ChevronDown";
import Popover from "@kiwicom/orbit-components/lib/Popover";
<Popover content="This is extra content">
    iconRight={<ChevronDown />}
    Learn more

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 actions
A popover with the ability to add adult and child passengers and a single primary action.
A popover with buttons to add passenger, add special meals, and add cabin bags.

Related components


Popovers are great for displaying small bits of information or individual choices. For anything that requires more information or structure, use a modal.


Popovers can present their content without disrupting the main user flow. If the content is less related to the current screen or you don’t mind interrupting the flow to grab attention, consider a dialog.


Popovers can include small interactions or choices. If you have extra information that is only very short text, consider a tooltip.


Popovers present information or choices outside the scope of the current screen. If you’d like to add the additional information to the screen itself, look into using a collapse.