Notifications
Notifications provide important, contextual information that may or may not not require the user to take action.
Coded Components
Helper classes: Looking for a complete list of helper classes for these components?View helper classes
Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.
Informational Alert with Optional Anchor Links
Success Alert with Optional Title and Anchor Links
Informational Alert with Optional Title and Anchor Links
Catastrophic Error with Optional Title
User Error with Optional Title
User Error
Solid Label Badges
Stroked Label Badges
Numeric Badge on Darker Background
Numeric Badge on Lighter Background
Standard Announcement
Announcement with Optional Image
Announcement in Berry
Announcement in Green
Announcement in Midnight
Announcement in Purple
Heading
No items found.
Usage
Alerts & Errors
Page-level notifications should appear below the page title and above the content.
Section-level notifications should appear below the section header and above that section's content.
Alerts and errors are displayed with the following priority:
- Catastrophic error alerts (if any) are always displayed by themselves.
- If there are no catastrophic errors, then user error alerts are displayed first.
- Success alerts (if any) follow user errors.
- Informational alerts (if any) are displayed last.
Alerts and errors may include an optional title.
Minor modifications can be made to the paragraph styling for an alert or error, but its heading styling should not be changed. Use screenreader-only text because notifications should be readable without a style sheet.
Navigation should be precise to each identified error and without the necessity to navigate the entire form. Notifications may include an optional list of one or more anchor links if the alert is specific to features farther down the page.
In cases with limited space, an appropriate icon (success, informational or error) can be used to trigger a tooltip that houses the notification message.
Writing a Notification
Important: See the Content Style Guide for detailed information about writing notifications, alerts and error messages.
Alerts and errors do not include marketing or promotional content.
Alerts and errors do not use interstitial or modal transitions that leverage static content.
Sufficient details should be provided for the user to address any user error. Error message text should be associated with each feature in error so that all errors are understandable and potentially correctable.
Consider next steps. When the user is required to do something in response to notification, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message.
Write the message in concise, human readable language; avoid jargon and computer code.
Be polite in error messages — don’t blame the user.
Notifications are an opportunity to educate users because users will read a message that helps them resolve an error even if they won’t read documentation.
Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.
Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.
Alerts
Alerts include success messages and important information that do not require action by the user.
Can be collapsed and reopened.
Errors
Errors notify users that something has gone wrong, giving their progress either a temporary or permanent “stop”.
Cannot be collapsed due to their importance.
Catastrophic errors appear by themselves, without the distraction of other error and alert types.
Error notifications are automatically removed, independent of other error messages, when each error state is resolved.
The meaning of an error notification should be conveyed through means other than color alone (i.e. an icon and explicit title).
Badges
Badges are the smallest type of notification and are typically used to:
- Numeric badges highlight the amount of items needing attention, such as items in a cart, unread messages, or alerts that are awaiting action.
- Label badges reinforce content and file types, such as help content, primary subject matter, secondary subject matter, and content related to purchases.
Any of the brand approved colors for containers may also be used for badges so long as the implementation follows usage and accessibility guidelines.
No badge is shown for a numeric badge if the badge count number is zero.
Badge counts in excess of 999 will display “999+” for numeric badges.
Announcements
Multiple Announcements
- Avoid stacking multiple announcements unless its unavoidable.
Use an announcement for publicizing ...
- Dell programs
- Dell.com features
- Dell.com tools
Don't use an announcement for ...
- Merchandising a product, service or solution. Instead, use a banner or card.
- System alerts, errors or similar information. Instead, use an alert or error (see below)
Variants
- An announcement may have a colored bar or approved icon, but never both.
- An announcement can include an optional title.
- An announcement can include up to two links.
Do's and Don'ts
Do.
Don't.
Do.
Don't.
Do.
Don't.
Common Button Labels and Usage
Title case, 2-3 words maximum.
Do not combine actions in a label (exception:
"Customize & Buy").
If standard labels don't fit the button's
purpose, align label with the task the user is attempting.
Please refer to the
Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information
regarding call-to-action labels and usage.
Button
Label:
Corresponding Action:
Add to
Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign
In/Sign Out
View
Details
Ok/Cancel
Learn
More
Close
Takes
users to Cart page, with item added
Used
for search buttons
Takes
users back to entry point for a task
Used to
save an item
Navigates users to change an item
Deletes
an item on the page, usually with a verification step
Used as
progression
Used
as forward and backward navigation (Next is primary, Previous is secondary)
Used
to submit a task or info
Used
for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used
instead of “Select” in cases of product details or within learn content
For
use in modal verification steps when more specific CTAs will not fit due to space
Used
to link users to more learning content or contextual help
Used
within modal windows
Accessibility
To be determined.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for alert and message dialogs from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for alert dialogs from WAI-ARIA 1.1.
- For announcements, please refer to these recommendations for notes from WAI-ARIA 1.1.
You may refer to this example of an alert dialog from WAI-ARIA practices 1.1.
You may also refer to these tutorials for user notifications from Web Accessibility Tutorials.