Component

ba-flight-details

ba-flight-details is for showing the important information for a flight

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Airport name

Full name of the airport

Airport code and terminal

Three-letter IATA airport code and terminal number displayed on a single line

Stopover information (required if applicable)

Duration and location of any stopovers during the flight, shown with a clock icon

Date

Flight date in locale-specific format

Time

Flight time in 24-hour format

Design Documentation

If you are showing the departure and arrival information for a flight, and the flight is arriving a day or more later. Do use the next-day-arrival attribute to indicate how many days later the flight is arriving.

This component can be used as part of our trip summary pattern which allows you to show multiple flights and connections

If the flight has a stopover you must provide both the duration and location of the stopover for it to show in the component.

Both time and location should be shown to remove any ambiguity about the stopover and give the user all the information needed.

If however the stopover duration is not available, just show the location.

Live Demo

<ba-flight-details
  airport-name="London Heathrow Airport"
  airport-code="LHR"
  terminal="5"
  date-time="2024-01-01T14:48"
></ba-flight-details>

Properties and attributes

Property	Attribute	Description	Type	Default
`airportCode`	`airport-code`	The code of the airport	`string \| undefined`	`undefined`
`airportName`(required)	`airport-name`	The name of the airport	`string`	`undefined`
`dateTime`(required)	`date-time`	The date and time of the flight	`string`	`undefined`
`estimatedTime`	`estimated-time`	The estimated time of the flight	`string \| undefined`	`undefined`
`nextDayArrival`	`next-day-arrival`	Whether the flight is arriving the next day	`string \| undefined`	`undefined`
`stopDurationHours`	`stop-duration-hours`	The duration of the stop in hours	`string \| undefined`	`undefined`
`stopDurationMinutes`	`stop-duration-minutes`	The duration of the stop in minutes	`string \| undefined`	`undefined`
`stopLocation`	`stop-location`	The location of the stop	`string \| undefined`	`undefined`
`terminal`	`terminal`	The terminal of the airport	`string \| undefined`	`undefined`
`type`	`type`	Whether the flight is arriving or departing	`"arriving" \| "departing" \| undefined`	`'arriving'`

Permitted ARIA roles

None

Slots

No slotted content available for this component.

Parent components

ba-flight-details can be slotted into:

Usage

Date and time formatting

The component handles the formatting of the date and time internally, so it only requires an ISO datetime string. It will also render the date in the correct format for the locale that is being used on the page.

Basic usage

Showing a single flights details

A basic example of ba-flight-details

<ba-flight-details
  airport-name="London Heathrow Airport"
  airport-code="LHR"
  terminal="5"
  date-time="2024-01-01T14:50"
></ba-flight-details>

Showing a delayed flight

Showing a single flight that is delayed

Delayed flight

<ba-flight-details
  airport-name="London Heathrow Airport"
  airport-code="LHR"
  terminal="5"
  date-time="2024-01-01T14:48"
  estimated-time="01:00"
></ba-flight-details>

Departure and arrival

Showing departure and arrival details

A basic example departure and arrival details

<ba-grid columns-800vw="2">
  <ba-flight-details
    type="departing"
    airport-name="London Heathrow Airport"
    airport-code="LHR"
    terminal="5"
    date-time="2024-01-01T14:48"
  ></ba-flight-details>
  <ba-flight-details
    airport-name="Singapore Changi Airport"
    airport-code="SIN"
    terminal="1"
    date-time="2024-01-02T22:00"
    next-day-arrival="1"
  ></ba-flight-details>
</ba-grid>

Showing a flight with a stop

Showing a flight that contains a stop

Flight with a stop

<ba-flight-details
  type="departing"
  airport-name="London Heathrow Airport"
  airport-code="LHR"
  terminal="5"
  date-time="2024-01-01T14:48"
  stop-duration-hours="1"
  stop-duration-minutes="30"
  stop-location="Dubai"
></ba-flight-details>

Guidelines

In high contrast mode:

Text and information use the browser default colour
Keylines and borders adapt to the current text colour

No keyboard interactions have been defined for this component.

Usage and accessibility checklist

Use this checklist to confirm the component has been configured and used correctly.

UX checklist

ba-flight-details displays accurate and complete flight information
Use the next-day-arrival attribute for flights arriving a day or more after departure
Dates are passed as ISO datetime strings for proper locale formatting
For stopovers, provide both duration and location when available
ba-flight-details is used as part of the Trip Summary pattern for showing multiple flights
Test with realistic flight data including delays, stopovers, and international destinations
Terminal and stopover information are displayed when provided

These checks are handled by the component and do not need to be repeated each time it is used.

ba-flight-details is accessible using assistive technology
Date and time information is properly formatted and announced
Colour contrast for all states in all BAgel themes
Date and time respect users' locale settings
Next day arrival indicator is perceivable across all assistive technologies
High contrast mode adjustments