UltraCX - Alert

Usage

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
  • 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.

Usage

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.

    Variants

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

    Alert colours include green, yellow, red as well as the site-wide primary and secondary colours.