Alerts provide feedback to the user in a more stylised manner than a body copy. The use colours and iconography to draw the users attention to messaging and supporting call to actions

Key Points

  • There are four styles of alerts; information, warning, danger and success
  • Each alert has a default icon
  • Alerts messages should be concise but they can wrap over multiple lines
  • Sizes can be adjusted to suit but the line length of the message should be inline with our copy guidelines
  • Give a clear title to summarise the content
  • Alerts have the option to be include a dismissable button or up to two call to action (CTA) buttons


Alerts provide feedback to the user in a more stylised manner than a body copy. They are supported by an icon and encapsulated in a styled container to highlight tone and emphasis. They have the ability to be placed in close proximity to the information they are relevant to and should always be placed before any action button.

Example of an information alert

Example of an information alert

Alerts should be placed inline with other components but above the content they are trying to highlight.

There should be spacing around the alert to show the context of the message in relation to other content, more details can be found in the layout guidelines.


Provide important or supporting information that a user may need to be aware of i.e. disclaimers, have a policy number to hand.




Use this to display information that needs attention or users need to take an action on.




Use this when something critical has happened and the user has to resolve an issue immediately. For example when users cannot proceed further in a journey or they need to fix something.

Don’t use danger alerts for information that the user doesn’t need to address immediately.



Use this to let the users know that an action has happened successfully.



Alerts are static areas of content and they are displayed either on load or after a process has completed. Therefore their behaviour is limited.

Buttons to be added



A small ‘x’ icon in the top right is used to dismiss the alert. Close button is optional and shouldn’t be included if the alert is critical for a user to read.


All alert styles have the option to include up to two CTA buttons.

Button Types