Overview

Page-level message

Page-level messages present important information for users to understand the context and take action. They remain visible until the user has acknowledged or rectified the issues highlighted. Place them on top of the page or near the area of action.

Page-level message

Usage

When to use
Triggered by user action or the system, page-level messages provide users with timely and relevant information and offer action buttons when needed. They're often used to provide status updates, warnings, or errors, and will sit on the page until the user has dismissed it or resolved the issue.
Put the message close to the area of action
Place them at a noticeable and recognisable place — at the top of the page or near the place of action.
Choose the correct semantic version based on its content
Select the semantic meaning that fits your message. For example, if the message is not an error, don't use the cerise variant just to get people's attention.
How best to use
Don't
Don't use it as a toast message.
Don't
Don't include multiple call-to-action buttons in page-level messages.
Caution
Only stack multiple page-level messages if it's absolutely necessary.
Component comparison table
Component
How it’s triggered
Usage
Attention and interaction
Can it be used for error messaging?
Dialog
User
Use sparingly as it's purposefully interruptive and launches a pop-up over the page. Requires user interaction to dismiss.
Immediate user attention and interaction.
Yes
System alert
System
Provides a system-wide update and stays visible until it's dismissed.
No immediate attention or interaction required.
No, unless exceptions are given
Page-level message
System or user
Presents important contextual information for users to take action. Commonly paired with form fields. Don’t auto dismiss.
Medium to high level of user attention and interaction.
Yes
Snackbar
User
Provides light feedback without requiring user interaction.
Low attention and no interaction required.
No