ba-message-global
A site-wide or product-wide message displayed above the global header, used to communicate important information. For example, flight disruptions and important operational updates.
Airframe
Web Components
React
React Native
Anatomy
Message container
Full-width container shown at the top of the page to group critical information.
Type indicator
Decorative icon indicating the message variant (for example info or error).
Heading
Short summary including the severity and core message.
Content
Additional detail explaining context and any required next step.
Action link (optional)
Optional link to help users resolve the issue or find more information.
Design Documentation
For example:
infoshould be used for non-critical updates, such as routine service announcements and general informationerrorshould be used for critical messages, such as system outages, booking failures, or critical safety alerts that require immediate attention
Using only a heading without any accompanying content in ba-message-global is not recommended. Include content that explains why the message is shown and what action is required.
The message should only be used for important and critical information that is relevant to all customers. Using it for marketing or promotional messages will reduce the impact of the message when it is used for its intended purpose.
To avoid confusion, only one message of each variant should be shown on a page at a time. If multiple messages are required, group multiple messages of the same variant into a single message.
Live Demo
Example heading
Example content
<ba-message-global>
<h2 slot="heading">Example heading</h2>
<ba-content>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-message-global>Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant |
variant |
Set the message icon and colour | "error" | "info" | undefined |
'error' |
Permitted ARIA roles
- None
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> |
"action" |
Components to show at the bottom of the card | <ba‑button>, <ba‑details>, <ba‑flex>, <ba‑link> |
Parent components
None
Usage
Basic usage
In most scenarios a message will consist of a heading, some content, and an action to find out more or resolve the issue.
<ba-message-global>
<h2 slot="heading">Important information about flight to London</h2>
<ba-content>
<p>Some further details about what the issue is...</p>
</ba-content>
<ba-link href="/url" slot="action">Action to find out more</ba-link>
</ba-message-global>Guidelines
Because this component often displays critical information, it should always appear as the first element on the page (above the ba-header if present). This positioning ensures that all users see the message before any other content.
To ensure that messages are universally understood, the severity (or variant) must be included in the heading. This is because:
- Icons are not understandable by all users
- Icons are decorative and hidden from screen readers
- Users who are colourblind may have difficulty differentiating message types by colour alone
- In high contrast mode the message colours are the same
Heading examples that include severity:
- 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:
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 bottom edge of the message to help users understand that the content is grouped
Keyboard navigation
State: Focus starts at top of page
Moves focus to the first interactive element, including the message action link if present.
State: Action link in message is focused
Activates the action link.
Scrolls page (standard link behaviour); does not activate the link.
Moves focus to the next focusable element.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Use the correct variant for context (for example info for non-critical updates, error for critical issues).
- Include content in addition to a heading so users understand why the message appears.
- Do not use this component for marketing or promotional content.
- Show only one message per variant on a page; combine same-variant messages where needed.
- Place ba-message-global as the first element on the page.
Accessibility checklist
- Include severity in the heading text (do not rely on icon or colour alone).
- Ensure all message text is clear and understandable without visual cues.
- Ensure any action link is keyboard operable and in logical tab order.
- Ensure message meaning remains clear in high contrast mode.
These checks are handled by the component and do not need to be repeated each time it is used.
- In high contrast mode, icon and keyline must use current text colour.
- In high contrast mode, a 1px bottom border must be present to show grouping.
- Keep icon decorative and hidden from assistive technologies where appropriate.
- Verify text and UI contrast meet WCAG requirements.