Notifications

Notifications provide important, contextual information that may or may not not require the user to take action.

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:

  1. Catastrophic error alerts (if any) are always displayed by themselves.
  2. If there are no catastrophic errors, then user error alerts are displayed first.
  3. Success alerts (if any) follow user errors.
  4. 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).

Labels & Badges

Labels

Labels are the smallest type of notification, used to 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 labels so long as the implementation follows usage and accessibility guidelines.

Badges

Badges are typically used to highlight the amount of items needing attention, such as items in a cart, unread messages, or alerts that are awaiting action.

No badge is shown if the badge count number is zero.

Badge counts in excess of 999 will display “999+”.

Do's and Don'ts

Types

Variants

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

Alerts

Success Alert

<div aria-expanded="true" class="dds__alert dds__alert-dismissible" role="alert"> <div class="dds__less"> <div class="dds__d-flex dds__justify-content-between"> <div class="dds__alert-heading dds__d-flex dds__align-items-center"> <i class="dds__icons dds__check dds__icon-h4" aria-hidden="true"></i> <h4 class="alert-title">Success alert sample title (optional)</h4> </div> <button type="button" class="dds__icons dds__close-x" data-dismiss="dds__alert" aria-label="Close - Success alert sample title (optional)"></button> </div> <p class="dds__alert-body">Lorem ipsum dolor amet kogi vaporware shoreditch chicharrones cold-pressed. Art party chambray activated charcoal 8-bit palo santo, edison bulb paleo vinyl cronut street art. Seitan poutine vice freegan cloud bread, vape whatever keffiyeh ugh asymmetrical semiotics. </p> <ul> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> </ul> </div> <div class="dds__more"> <button type="button" class="dds__dismiss" data-dismiss="dds__alert">View Dismissed Alert</button> </div>
</div>

Informational Alert

<div class="dds__alert dds__alert-dismissible" aria-expanded="true" role="alert"> <div class="dds__less"> <div class="dds__d-flex dds__justify-content-between"> <div class="dds__alert-heading dds__d-flex dds__align-items-center"> <i class="dds__icons dds__alert-info-cir dds__icon-h4" aria-hidden="true"></i> <h4 class="alert-title">Informational alert sample title (optional)</h4> </div> <button type="button" class="dds__icons dds__close-x" data-dismiss="dds__alert" aria-label="Close - Informational alert sample title (optional)"></button> </div> <p class="dds__alert-body">Lorem ipsum dolor amet kogi vaporware shoreditch chicharrones cold-pressed. Art party chambray activated charcoal 8-bit palo santo, edison bulb paleo vinyl cronut street art. Seitan poutine vice freegan cloud bread, vape whatever keffiyeh ugh asymmetrical semiotics. </p> <ul> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> <li>(optional) Lorum Ipsum with <a href="">anchor link.</a></li> </ul> </div> <div class="dds__more"> <button type="button" class="dds__dismiss" data-dismiss="dds__alert">View Dismissed Alert</button> </div>
</div>

Errors

Catastrophic Error

<div class="dds__alert" role="alert"> <div class="dds__d-flex dds__justify-content-between"> <div class="dds__alert-heading dds__d-flex dds__align-items-center"> <i class="dds__icons dds__alert-error dds__icon-h4" aria-hidden="true"></i> <h4 class="alert-title">Catastrophic error sample title (optional)</h4> </div> </div> <p class="dds__alert-body">Lorem ipsum dolor amet kogi vaporware shoreditch chicharrones cold-pressed. Art party chambray activated charcoal 8-bit palo santo, edison bulb paleo vinyl cronut street art. Seitan poutine vice freegan cloud bread, vape whatever keffiyeh ugh asymmetrical semiotics. </p>
</div>

User Error

<div class="dds__alert dds__alert-dismissible dds__fade dds__show" role="alert"> <div class="dds__d-flex dds__justify-content-between"> <div class="dds__alert-heading dds__d-flex dds__align-items-center"> <i class="dds__icons dds__alert-notice dds__icon-h4" aria-hidden="true"></i> <h4 class="alert-title">User error sample title (optional)</h4> </div> </div> <p class="dds__alert-body">Lorem ipsum dolor amet kogi vaporware shoreditch chicharrones cold-pressed. Art party chambray activated charcoal 8-bit palo santo, edison bulb paleo vinyl cronut street art. Seitan poutine vice freegan cloud bread, vape whatever keffiyeh ugh asymmetrical semiotics. </p>
</div>

User Error without Title

<div class="dds__alert dds__alert-dismissible dds__fade dds__show" role="alert"> <div class="dds__d-flex dds__justify-content-between"> <div class="dds__error-default-body"> <i class="dds__icons dds__alert-notice" aria-hidden="true"></i> <p class="dds__alert-body">Lorem ipsum dolor amet kogi vaporware shoreditch chicharrones cold-pressed. Art party chambray activated charcoal 8-bit palo santo, edison bulb paleo vinyl cronut street art. Seitan poutine vice freegan cloud bread, vape whatever keffiyeh ugh asymmetrical semiotics. </p> </div> </div>
</div>

Labels

No items found.

Badges

Dell Blue Button with Dark Badge

<a href="#" class="dds__mail-icon-ctnr" aria-label="42 unread email(s)"> <i class="dds__icons dds__mail" aria-hidden="true"> <span class="dds__badge dds__badge-dark">42</span> </i> <span>Mail</span> </a>

White Button with Red Badge

<a href="#" class="dds__calendar-icon-ctnr" aria-label="3 event(s)"> <i class="dds__icons dds__calendar" aria-hidden="true"> <span class="dds__badge dds__badge-red">3</span> </i> <span>Calendar</span> </a>

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.

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.