Ripple Design System


The Alert component display required actions or important messages to users.


Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.

Alerts are:

  • intrusive by design
  • created on purpose
  • dismissible by a user
  • not triggered by user action or back-end event.

Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.

When and how to use

  • Only use an alert if its message or action applies to an entire product or site.
  • Write the alert in plain language that's clean and concise to minimise a user's cognitive load.
  • If the user needs more information or to complete an action, use link text for the call to action.
  • Place the alert at the top of the screen before the header.
  • Only use the critical alert setting for messages or actions that warrant it.
  • Limit actions to one per alert banner.

When and how not to use

  • Don’t use an alert if its message applies only to that feature or page.
  • Alerts shouldn't cover other components, only pushing down page content.
  • Don't use alerts for actions initiated by the user or backend.


An alert’s styling is according to its meaning and uses semantic colours.

Alert colours include:

  • grey for general information
  • orange for a minor warning
  • red for a critical error or expected dangerous event.


  • To communicate general information to users.


  • To communicate a minor warnings to users.


  • To communicate a critical error has occurred or dangerous event is expected to users.

Alert ordering

So that users view alerts in order of importance, they appear in priority order:

  1. Critical.
  2. Warning.
  3. Information.

Propose a change to this page on GitHub.