HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
What are they for?
Taxonomy
State vs. status vs. health
Notification systems
Variants
Toast notification
Global banner notification
Roadmap
Have more questions?
Components

Notification

Notifications deliver clarity for information related to tasks or system statuses that the user should be made aware of.

What are they for?

Notifications build trust by providing users confidence and assurance that they are informed with timely, relevant status about their systems and tasks.

Taxonomy

To standardize language for notifications across HPE projects, be sure to familiarize yourself with this taxonomy:

  • Type - In the broadest terms, what the notification is about
  • State - The current stage within a process
  • Status - The condition of a process
  • Attention level - The priority and importance of a notification
  • Actions - Interactactions within a notification
  • Persistence - How the notification is dismissed
  • Placement - Where the notification can be found
  • Insight - The content of the notification
Type
State
Status
Attention level
Actions
Persistence
Placement
Insight
Information
In progress
Critical
High
Dismiss
Dismissable
Banner
Support
Task
Starting
Normal
Medium
Read
Clearable
Browser
Progress update
Event
Stopped
Warning
Low
Unread
Action required
Email
Status/task tracking
Pending
Unknown
Yes
Temporary
Toast
Created
Success
No
Bell
Request received
Failure
Badging
System
Global
Inline

State vs. status vs. health

A state is the current stage of a process.

A status is the condition of the state. Status can also be thought of as a pointer to a state’s “health.” At HPE we tend to use the two terms interchangeably, but the end users don't know that. To avoid confusion for the end user, do not use the word "health" in your user interfaces. Always use "status" instead.

Here is an example of a toast notification that illustrates their differences:

The state of this task is successful
Invitation sent to user!
The status is normal because the state is successful

Keep in mind that a status derives from a state.

Notification systems

The following types of notifications are used to provide users with full transparent clarity on tasks and system statuses:

  • Status Indicators are used within all types of notifications. They capture a user’s attention based on the notification’s level of severity.
  • For low priority and non-action-oriented notifications, Toast Notifications are a great way to inform users unobtrusively.

Variants

There are a couple types of the notification component depending on use case.

Toast notification

Toast notifications are used for low attention status messages or updates that do not require user action. For more thorough guidance on how and when to properly make use of a toast, access the full page on Toast Notifications.

This notification will disappear after 8 seconds if not dismissed via the close button.

Global banner notification

Global banner notifications are system-generated alerts that attract the user's attention to system conditions and updates. For more thorough guidance on how and when to properly make use of a global banner, access the full page on Global Banner Notifications.

This service is currently unavailable. We are working on getting things fixed.

Roadmap

The Design System team is currently exploring and researching best practices and considerations for notification patterns. Here are some we plan on addressing:

  • Page banner
  • System
  • Inline
  • Notification center
  • Badging & bell

Have more questions?

Please be sure to send them over to the #hpe-design-system channel on Slack!

Related

Related content you may find useful when using Notification.

Status Indicator

Quickly provide peace-of-mind or call attention to items requiring a user's action.
HoorayYour toast is done!

Toast Notifications

Toast notifications are used to communicate low severity level information to users in an unobtrusive way.
Banner notification under HPE Global Application header.

Global Banner Notifications

Global Banner Notifications are system generated alerts that attract user's attention to system conditions and updates.
4

Stack

A Stack component is a container that stacks content on top of each other.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page