Notification banner

A notification banner is a prominent message area to communicate important information directly related to user actions or updated information.

It provides immediate feedback about completed actions or alerts users to important information they need to know.

Use notification banners when users need to understand the result of their actions or be aware of important information that they may miss.

Use notification banners when you need to:

• confirm a user action was successful but they have remaining tasks to complete (a success notification banner)
• provide important updates related to the current page
• alert users to time-sensitive information or deadlines
• warn users about important consequences before they take action
• notify users that content has been withdrawn or updated
• share information that users commonly miss or ask about

Don’t use notification banners when other components better serve the user need.

Use a panel instead when:

• confirming completion at the end of a service, transaction or form
• users have successfully finished all required tasks

Use inset text instead when:

• information is important but not urgent or time-sensitive
• content provides supporting context rather than immediate alerts

Use body text instead when:

• messages are minor or headings work better
• information flows naturally within the main content

Avoid notification banners when:

• messages are minor or don’t require emphasis
• content is not directly actionable or time-sensitive
• information is decorative or promotional

Write clear, actionable content that helps users understand what’s happening and what they need to do.

Content structure

Remember to maintain page hierarchy. Notification banner headings use heading level 2 – consider this when planning your page’s heading structure.

Keep messages concise and focused on the important or time-sensitive information.

Include specific next steps or deadlines where relevant.

An important notification banner shares important updates, instructions or deadlines.

Your content should provide clear context and any required actions.

A success notification banner confirms completed actions when users have remaining tasks.

Your content should confirm what happened and explain any remaining tasks.

For example, ‘Application submitted. Check your email to confirm your account.’