Alerts are used to inform the user of something important.

  • Each alert should only have one title within it
  • Each alert should be in its own alert style
  • You shouldn't show more than one alert style to the user at one time.

We have four alert styles:

Success alert

This alert is to tell the user that the task was a success. For example, completing a purchase.

Thank you!
Order 6214068486 has been placed. We will be processing your order shortly.


This alert is to inform the user about something, such as to bring a helmet to event registration.

Don't forget!
Please bring your helmet to event registration.


A warning is used to tell the user something negative.

Oh no!
It looks like we are out of stock on this item.


A danger alert is used when the user can't advance and that they've entered something incorrect.

We're sorry.
We need your first name to complete the sign up process.