Keep users informed and help bring attention to important status updates through notifications. As users make progress toward achieving their goal, they should receive  appropriate and timely information.


Makes users aware of relevant issues involving their present activity and/or system.

  • Informational — Provides context-specific information to users.
  • Successful — Confirms a user’s task was successfully completed, displayed through a static message.
  • Warning — Alerts users if their activities may lead to unexpected consequences.
  • Error/Danger — Notifies users of an error or critical failure that blocks them from proceeding until the issue has been resolved


An alert notifies the user when their status changes or relays additional information.


Standard alerts are used in the context of an application either in the content area itself or within components. (The action item is optional)

See the Pen Notification - Standard by USANA UX (@usana_ux) on CodePen.


App-level alerts are used in the global context of an application. They are placed at the very top of all content and navigation.  (The action item is optional)

See the Pen Notification - Global by USANA UX (@usana_ux) on CodePen.


See the Pen Notification - Variation by USANA UX (@usana_ux) on CodePen.

Inline (forms)

The notifications are intended to be used in forms to call attention to specific error or warnings.

See the Pen Toasts - forms(inline) by USANA UX (@usana_ux) on CodePen.


Toast serves as a feedback & confirmation mechanism after the user takes an action.


See the Pen Toasts by USANA UX (@usana_ux) on CodePen.


See the Pen Notifications - Success by USANA UX (@usana_ux) on CodePen.


See the Pen Notifications - Tab by USANA UX (@usana_ux) on CodePen.


Notifications allow users to stay informed and be notified of any important change in status or essential update. All designs should be AA compliant.


Notifications have three default heights but can be altered according to content length.

  • Small: 32px
  • Medium: 40px
  • Large: 48px


Notification specifications are available for designers and developers to help them build pixel-perfect products.

  • Allow users to dismiss a notification.
  • Do use clear and concise language.
  • Do ensure users know how to take action if it is necessary.
  • Have too many notifications. They will either overwhelm or distract the user and are likely to be ignored.
  • Use technical jargon or language unfamiliar to the user.
  • Leave users without next steps.