Overview

Criticality

4 levels of criticality:

 

Actions

• Actions include buttons and hyperlinks. These are optional.
• If relevant, add a button or link that gives the user a way to fix the issue.
• You can include a hyperlink in the subtitle copy if necessary but try to avoid it as it’s not very visible. Try to use the actions in the component instead.
• 1-3 words max, typically a {{verb}} + {{noun}}. Refer to buttons guidelines.

Dismiss

This is the “x” on the far right of the alert.

Attributes

• A dismiss icon is available by default in all the banner alerts. Functionally, this action results in the banner disappearing.
• When dismissed, the alert will reappear in the next session if the issue is still unresolved
• Hide a dismiss icon only when that action would be detrimental to the flow
• Always use the Icon button component in the “Small” size

 

Content

• Straight to the point, clear, concise. Open with the main reason for why this alert is appearing (think: “If the user only remembers 1 thing out of this, what would it be?”)
• Use full sentences for a more conversational tone but keep it as short and clear as possible.
• Ideal: 1 sentence / Acceptable: 2 sentences. No more than 1 line on desktop. More details below.
• Follow punctuation guidelines
• If necessary, use bold to highlight the key message and make the copy easy to scan. Don’t bold the entire message: use a title instead.
• If you only have one line of copy, use the subtitle and keep the title hidden.
• If relevant, add a button that gives the user a way to fix the issue

 

Types

1. Level 1: the Site-wide banner
2. Level 2: the Page-level banner
3. Level 3: the Inline banner
4. Level 4: the Text alert

 

Level 1: the site-wide banner

The top level alert, used for site-wide notifications like scheduled outages, billing issues, or major shifts in terminology.

Attributes

• Use sparingly, as they push down the rest of the software
• Appear above the navigation, full-width from left to right
• Only 1 banner a time
• Site-wide alerts take precedent over any other site-wide banners, including upsells
• Dismissible by default, but can be made non-dismissible if critical

Copy guidelines

• Title: 3 - 5 word summary of issue (can go up to 7, but ideally won’t)
• Content: 70 characters max
• Link: 2-3 words linking to more information and/or a resolution. Follow link guidelines, and avoid linking phrases like “learn more.”
• The title must transmit the key issue, while the body gives a way to resolve or adds context to the issue. Avoid repeating the same info in the title + the body.

 

Level 2: the page-level banner

For feature-level alerts, ex: issues with payroll specifically

Attributes

• Appear at the top of a page, just below the page title and subtitle, if any.
• Spans the full-width of the page content
• 1 banner on a page at a time

Copy guidelines

• Title: 3 - 5 word summary of issue. May include a count of issues.
• Content: 70 characters ideally, 150 character max
• Button: typically 1 resolution action
• Link (optional): 2-3 words linking to more information and/or a resolution
• The title must transmit the key issue, while the body gives a way to resolve or adds context to the issue. Avoid repeating the same info in the title + the body.

 

Level 3: the inline banner

Call out an issue with a section of content.

Attributes

• Appear inside the content of a page
• Preferably 1 banner a time, max of 3 to a page
• Avoid stacking multiple banners.

Copy guidelines

• Title (optional): 3 - 5 word summary of issue. May include a count of issues.
• Content: 70 characters ideally, 150 character max
• Link (optional): 2-3 words linking to more information and/or a resolution
• Button (optional): 1 resolution action
• The title must transmit the key issue, while the body gives a way to resolve or adds context to the issue. Avoid repeating the same info in the title + the body.

Stacked vs unstacked

Use stacked when you have limited space.

 

Level 4: the text alert

Attributes

• Text alerts are TEMPORARY
• Requires a USER action to resolve the alert
• Once resolved, they disappear
• Typically become more critical over time
• Show a rapidly approaching or overdue deadline

Copy guidelines

• Content: try to keep on 1 line. 2 lines max
• Link (optional): 2-3 words linking to more information and/or a resolution
• If it’s an error the user must correct, make that explicit: “Please do x and y”. E.g.: “Please enter a valid email address”
• Use full sentences (e.g. say “Please enter a valid email address” instead of saying “Invalid email”)
• If possible (space limitation) use “please”
• If necessary, give explain the issue first and how to fix it second. See text field errors for more context.
• If it’s critical information that the user can correct, but could also continue without changing, just state the issue. E.g. “Due in 12 hours,” “Missing contact information”.
• Use active voice

Placement

Typically below the content it’s related to.

 

Best practices

 

 

Upsell banner

Upsell banner banners display short messages that focus on promoting an action or upgrading something the user already has. Visit Upsell banners to learn more (content TBD).

 

Best practices

• Use alerts sparingly. Too many alerts can cause users to ignore them (think: “if everything is important, nothing is”)
• Try embedding your content on the page FIRST as a subtitle, caption or footnote.
• Warning and critical alerts take precedent over all other banners, including upsells
• Avoid stacking multiple alerts. If necessary, stack in order of criticality, ex: critical first, warning second, etc.
• Banners and site-wide alerts are dismissible by default, which can be turned off

 

Related components

 

Resources

(internal only)

Figma

Storybook