Your bookmarks

UI components

AirportIllustration Communicates information about specific airports in an interesting visual way.

Alert Breaks the main user flow to present information.

Figma React Sketch

Badge Presents users with short, relevant information.

Breadcrumbs Shows where the user is within the app hierarchy.

Button Displays a single important action a user can take.

ButtonGroup Groups multiple related actions a user can take.

ButtonLink Displays a single, less important action a user can take.

CallOutBanner Encourages users to take an action to add additional services or the like.

Card Groups static content to make it easy to scan.

CarrierLogo Displays logos of transport carriers.

Checkbox Enables users to pick multiple options from a group.

ChoiceGroup Organizes checkboxes or radio buttons into a single related group.

Collapse Hides long or complex information under a block that can be hidden.

CountryFlag Displays flags of countries from around the world.

Coupon Highlights promo codes.

DestinationCard Deprecated in favor of the more general PictureCard.

DestinationHeader A destination header can be used as the header for content for any destination.

Dialog Prompts users to take or complete an action.

EmptyState Indicates when there’s no data to show, like when a search has no results.

FeatureIcon Draws attention to specific features.

Heading Shows the content hierarchy and improves the reading experience.

Icon Draws attention to specific actions and features.

Illustration Communicates information in an interesting visual way.

InputField Offers users a simple input for a form.

InputFile Enables users to upload a file to complete a form.

InputGroup Combines related inputs for a form.

InputStepper Enables incremental changes of a counter within a form.

List Shows related items.

ListChoice Shows one of a selectable list of items with similar structures.

Loading Lets users know that content is being loaded.

Modal Forces users to complete an action before continuing.

NavigationList Deprecated in favor of LinkList.

NotificationBadge Shows simple, non-interactive information.

Pagination Lets users navigate through large collections of items.

PictureCard Displays a card with a picture and space for information and actions.

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

PricingTable Helps users understand different pricing plans to choose from.

Radio Enables users to pick exactly one option from a group.

RatingStars Shows a static rating of a service such as a hotel.

Seat Presents visual information about a seat.

Select Offers a simple form control to select from many options.

Separator Visually separates content with different purposes.

ServiceLogo Presents a logo for a common service.

Slider Enables selection from a range of values.

Stepper Enables incremental changes of a counter without a direct input.

StopoverArrow Shows how many stopovers there are between two locations.

Table Creates a striped table for your tabular content.

Tag Offers a label that can optionally be selected and unselected or removed.

Text Renders text blocks in styles to fit the purpose.

Textarea Enables users to add longer text to a form.

TextLink Makes text in paragraphs actionable.

Tile Groups actionable content to make it easy to scan.

TileGroup Wraps tiles to show related interactions.

Toast Shows a brief, informative message that will appear only for a short time.

Tooltip Shows additional context on tap or hover.

TripSector Deprecated in favor of the forthcoming ItinerarySector.

TripSegment Deprecated in favor of the forthcoming ItinerarySegment.