Overview
Global alerts display across the top of the entire site to convey important information to the users.
The message or action must be relevant for the entire service.
There are 3 types of global alerts in our Design System, critical alerts, default (warning) alerts and general (information) alerts.
Critical Alerts
These indicate a significant issue and should only be used for an immediate threat to human life.
<!--Default critical style-->
<div class="qld__global_alert_include">
<section class="qld__global-alert qld__global-alert--critical">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__critical"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__close"></use></svg>
</button>
</div>
</div>
</div>
</section>
</div>
Warning
This is the default alert. It should be used when an event has either happened or is about to and poses a threat to or will seriously affect a service. It can also be used to communicate an ongoing crisis which seriously affects a services' operation.
<!--Default warning style-->
<div class="qld__global_alert_include">
<section class="qld__global-alert qld__global-alert--default">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__warning"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__close"></use></svg>
</button>
</div>
</div>
</div>
</section>
</div>
General information
These low level alerts that can be used to indicate a problem with the service as a whole.
<!--Default general information style-->
<div class="qld__global_alert_include">
<section class="qld__global-alert qld__global-alert--general">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="General Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__info"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__arrow-right"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__close"></use></svg>
</button>
</div>
</div>
</div>
</section>
</div>
Multiple alerts
In cases where separate messages on different critical issues are essential, a maximum of three global alerts is permissible.
<!-- Mulitiple alert example -->
<div class="qld__global_alert_include">
<section class="qld__global-alert qld__global-alert--critical">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md">
<use href="./?a=169317:dist/mysource_files/img/svg-icons.svg#qld__icon__critical"></use>
</svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Health alert:</strong> Disease outbreak
</div>
<div class="qld__global-alert__action">
<a href="https://www.qld.gov.au/">
<span>Read more</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<use href="./?a=169317:dist/mysource_files/img/svg-icons.svg#qld__icon__arrow-right">
</use>
</svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md">
<use href="./?a=169317:dist/mysource_files/img/svg-icons.svg#qld__icon__close"></use>
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="qld__global-alert qld__global-alert--critical">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md">
<use href="./?a=169317:dist/mysource_files/img/svg-icons.svg#qld__icon__critical"></use>
</svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Natural disaster:</strong> Floods
</div>
<div class="qld__global-alert__action">
<a href="https://www.qld.gov.au/">
<span>Read more</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<use href="./?a=169317:dist/mysource_files/img/svg-icons.svg#qld__icon__arrow-right">
</use>
</svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md">
<use href="./?a=169317:dist/mysource_files/img/svg-icons.svg#qld__icon__close"></use>
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="qld__global-alert qld__global-alert--default">
<div class="container-fluid">
<div class="qld__global-alert__main">
<div class="qld__global-alert__icon">
<svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="./?a=167673:dist/mysource_files/img/svg-icons.svg#qld__icon__warning"></use></svg>
</div>
<div class="qld__global-alert__content">
<div class="qld__global-alert__message">
<strong>Testing:</strong> This website is currently undergoing testing
</div>
<div class="qld__global-alert__action">
<a href="#">
<span>Learn more</span>
<svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="https://www.design-system.health.qld.gov.au/__data/assets/git_bridge/0030/167673/dist/mysource_files/img/svg-icons.svg#qld__icon__warning"></use></svg>
</a>
</div>
</div>
<div class="qld__global-alert__close">
<button aria-label="Close alert">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md">
<use href="https://www.designsystem.qld.gov.au/__data/assets/git_bridge/0027/169317/dist/mysource_files/img/svg-icons.svg#qld__icon__close"></use>
</svg>
</button>
</div>
</div>
</div>
</section>
</div>
Usage guidelines
When to use
These alert banners should be used sparingly, particularly warning and critical error banners, as they disrupt the user’s workflow.
When not use
Don't use global alerts for:
- System updates
- Validation errors
- Small localised incidents
- Little or no disruption to services
- An internal event
- Marketing campaigns
- The primary entry point for information
How to use
Always make sure that the key actionable information is visible at a glance. Text in alert banners should always be clear, concise and, where possible, give follow up actions to allow the user to become more informed or resolve the issue.
Limit global alerts to one message per site. If multiple alerts are necessary, assess if they can be consolidated into a single alert with an integrated call to action. In cases where separate messages on different critical issues are essential, a maximum of three global alerts is permissible. However, it's advisable to minimise their use, as global alerts can disrupt the user's workflow.
Alert banners use colour to add meaning, this only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. This means that information denoted by the colour must also be obvious from the content itself. For example, the visible text, or indicated through alternative means within the code.
Alert messages shouldn’t have more than 100 characters, so they don’t take up too much screen space on mobile and tablet designs. The link or action button has a 25 character limit — including spaces, so the link displays as a single line on a mobile device.
Research and rationale
The design of the global alert component is based on a combination of the MyGov website design, the Federal Department of Health site and NSW Designs System.
The structure of the alert banner includes an:
- icon
- title
- body text
- action button or link
- option to dismiss or close the banner.
This is also consistent with the structure of alert messages seen in other major Design Systems such as Microsoft Fluent and Shopify’s Polaris.
Most designs systems use multiple global alerts, categorised by their significance.
Our design follows this practice and is divided into 3 categories defined by colour and icons.
Queensland Government’s categories are:
- critical (red)
- warning (amber)
- general (pale blue).
We’ve used red as the colour for critical alerts. This is in line with The Queensland Government guidelines colour for state wide emergency department signage. The icon for critical alerts is based on a stop sign to command the attention of the user.
The warning alert colour is bright amber. The Australian signage standards 1319 uses amber, black text and a triangular icon for hazards not considered to be life threatening.
The general alert is a neutral pale blue colour. Pale blue is commonly associated with information signage which ties into the purpose of this alert. The icon for the general alert uses the international symbol for information. The square shape was chosen to further distinguish it from the other 2 categories.
The global alert colours are based on Australian and international standards and won’t change across sites regardless of where those sites sit within the brand architecture. Global alerts should look the same across all Queensland Government sites.
Classes and design tokens
| Name | Description |
|---|---|
| Critical alerts. |
| Default warning. |
| General information. |
| Critical alerts. |
| Default warning. |
| General information. |
Accessible global alert requirements
Keep these considerations in mind if you're modifying the Design System or creating a custom component.
ARIAL role
Critical alerts global alerts should have a role=”alert”. The alert role should only be used for information that requires the user's immediate attention (Mozilla Developer Network, 2021).
All other global alerts should have a role=”status” and are read after any critical announcements (Shopify, n.d.).
WCAG guidelines
2.1 Keyboard Accessible
Ensure that global alerts are operable by providing keyboard accessibility. Users should be able to navigate and interact with alerts using only a keyboard, without requiring a mouse or other pointing device. This includes ensuring that all interactive elements within the alert are keyboard accessible (W3C, 2018).
3.1.2 Language of Parts
Ensure that global alerts are understandable by using clear and concise language. Alerts should be written in plain language, using simple vocabulary and sentence structures to make them easy to understand for all users (W3C, 2018).
2.2.2 Pause, Stop, Hide
Global alerts should not create a significant distraction or disruption for users. Alerts should be designed and presented in a way that does not interfere with the user's ability to navigate or interact with the rest of the website or application (W3C, 2018).
References
Digital NSW (n.d.) Global alert, NSW Design System, accessed 10 April 2023.
Australian Government Department of Health (n.d.) Guiding principles behind the Health Design System, Health Design System, accessed 10 April 2023.
Digital Transformation Agency (2018) Page Alerts, Gold Design System, accessed 10 April 2023.
Shopify (n.d.) Banner, Shopify Polaris, accessed 10 April 2023.
Microsoft (n.d.) Fluent Design System, Microsoft Design, accessed 10 April 2023.
Standards Australia (n.d.) AS 1319-1994 REC:2018, Standards Catalogue, accessed 10 April 2023.
Mozilla Developer Network (2021) Alert role, MDN Web Docs, accessed 10 April 2023.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1, World Wide Web Consortium, accessed 10 April 2023.
Last updated: December 2023