ba-message
Messages are used to communicate short pieces of important information
Example heading
Example content
For example:
infoshould be used to let the user extra information, often unrelated to their current activityerrorshould be used for critical messages. Can block progress unless resolvedsuccessshould 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.
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
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant
|
variant |
Set the message icon and colour | "error" | "info" | "success" | 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>, <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
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
<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
<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-ba-link>
</ba-message>