Airframe GitHub Storybook
Component

ba-message

Messages are used to communicate short pieces of important information

Airframe

Active
Figma

Web Components

Active
Storybook Github

React

Active
Storybook Github

React Native

Planned Design Code Accessibility QA

Anatomy

A

Type indicator

A visual icon indicating the message type (info, success, error, or warning)
B

Heading

The main heading that communicates the message purpose and severity
C

Content

Supporting text that provides details about the message
D

Action link (optional)

An optional link to help resolve the message or navigate to relevant content

Design Documentation

For example:

  • info should be used to give the user extra information, often unrelated to their current activity
  • error should be used for critical messages. Can block progress unless resolved
  • success should be used to confirm something has been completed

Using only a heading without any accompanying content in ba-message is not recommended. It's essential to include content that explains to the user why it's shown and what is required to fix any issues.

Live Demo 

<ba-message>
  <h3 slot="heading">Example heading</h3>
  <ba-content>
    <p>Example content</p>
  </ba-content>
  <ba-link href="/link" slot="action">Action</ba-link>
</ba-message>

Properties and attributes

Property Attribute Description Type Default
variant variant Set the message icon and colour "error" | "info" | "success" | undefined 'error'

Permitted ARIA roles

  • alert

Slots

Slot Description Permitted elements
Unnamed slot Elements will render in the body of the component <ba‑content>, <ba‑flex>, <ba‑grid>
"heading" Text to show at next to the icon at the top of the message <h2>, <h3>, <h4>, <h5>, <h6>
"action" Components to show at the bottom of the card <ba‑button>, <ba‑details>, <ba‑flex>, <ba‑link>

Parent components

ba-message can be slotted into:

Usage

Basic usage

In most scenarios a message will consist of a heading, some content, and an action to resolve the message

An important message that lets the customer know they need to perform an action.
<ba-message>
  <h2 slot="heading">Important information about your upcoming flight</h2>
  <ba-content>
    <p>Some further details about what the issue is...</p>
  </ba-content>
  <ba-link href="/url" slot="action">Action to resolve</ba-link>
</ba-message>

With the alert role

Adding the alert role ensures that the information is immediately read aloud by a screen reader

A message that confirms the update of an email address
<ba-message type="success" role="alert">
  <h3 slot="heading">You have successfully updated your email address</h3>
  <ba-content>
    <p>We will now send emails to name@domain.com</p>
  </ba-content>
  <ba-link href="/url" slot="action">Go to my account</ba-link>
</ba-message>

Props

Prop Description Type Default
variant Set the message icon and colour "error" | "info" | "success" | undefined 'error'
children Elements will render in the body of the component <ba‑content>, <ba‑flex>, <ba‑grid>
heading Text to show at next to the icon at the top of the message <h2>, <h3>, <h4>, <h5>, <h6>
action Components to show at the bottom of the card <ba‑button>, <ba‑details>, <ba‑flex>, <ba‑link>

Permitted ARIA roles

  • alert

Parent components

BaMessage can be slotted into:

Usage

Basic usage

In most scenarios a message will consist of a heading, some content, and an action to resolve the message

An important message that lets the customer know they need to perform an action.
<BaMessage
  action={<BaLink href="/url">Action to resolve</BaLink>}
  heading={<h2>Important information about your upcoming flight</h2>}
  variant="info"
>
  <BaContent>
    <p>Some further details about what the issue is...</p>
  </BaContent>
</BaMessage>

With the alert role

Adding the alert role ensures that the information is immediately read aloud by a screen reader

A message that confirms the update of an email address
<BaMessage
  action={<BaLink href="/url">Go to my account</BaLink>}
  heading={<h3>You have successfully updated your email address</h3>}
  role="alert"
  variant="success"
>
  <BaContent>
    <p>We will now send emails to name@domain.com</p>
  </BaContent>
</BaMessage>

React Native documentation coming soon.

Guidelines

To ensure that the messages are universally understood, the severity (or variant) of the message must be included in the heading. This is because:

  • Icons are not understandable by all users
  • The icons are decorative and hidden from screen readers
  • Users that are colourblind may have difficulty differentiating the different types of message by colour alone
  • In high contrast mode the message colours are all the same

Heading examples that include severity:

  • Successfully updated your details (Success type)
  • Your inflight meal has been booked (Success type)
  • Error. Please fix the following issues (Error type)
  • Urgent. We need further information before you can check in (Error type)
  • Important information about your flight (Info type)
  • An update on Covid-19 (Info type)

Further reading:

When the alert role is used the contents of the message will be immediately read aloud by a screen reader. For this reason the alert role must only be used for messages that have been dynamically added to a page as a result of a user interaction. It must not be used if a message is already on the page when it loads.

Further reading:

It's important to maintain the order of headings so that they appear in a logical order in the page. Screen readers (and other assistive technology) rely on headings to navigate and understand structure of pages.

Further reading

In high contrast mode:

  • All message types use the current text colour for the icon and keyline
  • A one pixel border is added to the edge of the message to help the user understand that the content is grouped

Keyboard navigation

State: ba-message with action link has focus

⇥ Tab

Moves focus to the action link within the message

Usage and accessibility checklist

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

UX checklist

  • Pick the correct message type to suit the context (info for extra information, error for critical messages that block progress, success to confirm completion)
  • ba-message includes content beyond just a heading to explain why it's shown and what action is required
  • Test with realistic content to ensure the message is clear and concise

Accessibility checklist

  • Include the severity of the message in the heading text (e.g., 'Error. Please fix the following issues' or 'Successfully updated your details')
  • Add role="alert" for messages dynamically added to the page as a result of user interaction, not for messages present on page load
  • Use the heading slot with the appropriate heading tag level (h2, h3, etc.) to maintain heading hierarchy in the page

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

  • Icons are decorative and hidden from screen readers with supportive text in the heading
  • ba-message is operable using assistive technology
  • Colour contrast for all states in all BAgel themes
  • High contrast mode: all message types use current text colour for icon and keyline, with a 1px border to indicate grouped content
Designing Developing Components BAgel helper QA process britishairways.com Careers Cookie policy