ba-message-global
A message that sits at the top of page to communicate important information. For example flight disruptions and important operational updates
Example heading
Example content
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. It's essential to include content that explains to the user why it's shown and what is required to fix any issues.
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.
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 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:
- 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 the user understand that the content is grouped
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant
|
variant |
Set the message icon and colour | "error" | "info" | undefined |
'error' |
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> |
Permitted ARIA roles
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>