Contextual alert

Use a contextual alert to highlight a piece of information, often a deviation, with a contrasting background.

Short description

When a single value in a large table or text needs to be highlighted as a deviation the contextual alert can be used.

When and how to use it

Use a tooltip to give the user a description of the deviation.

Do's and don'ts


  • Follow the whisper/talk/shout-rules when selecting colour.


  • Don't over-use! Should only highlight very special situations.
  • Don't highlight too large areas as the colour is quite sharp.

Related to

  • Pattern: System alerts
  • Component: Widget
  • Component: Tooltip