Alert

Use alert components to notify users of important information or changes on a page.

• View on GitHub
• View on NPM

Info alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Overview

Page alerts are used to notify users of important information or changes on a page in a way that attracts the user's attention without interrupting the user's task. Typically they appear at the top of a page following a submit action.

There are four variations of the alert component:

Info

Success

Error

Caution

When to use alerts

Use an alert to give the user something they need to know in the context of the page they are viewing.

• Info alerts are for essential information only.
• Success alerts are essential for notifying the user that a task is complete.
• Use error alerts with form validation or other errors that block the user from completing their task.
• Use caution page alerts to tell the user something to be aware of; only use a caution alert if the information will help the user avoid a problem.

When not to use alerts

• Use alerts sparingly; there's evidence that people often miss them, and using them too often is likely to worsen this problem.
• Do not use alerts if the information is directly relevant in context to what the user is doing on the page.

How to use

• Position an alert immediately before the page header. The alert should be the same width as the page content.
• Avoid showing more than one alert on the same page. Instead, combine the messages in a single alert. If the messages are too different to connect, only show the highest priority alert type.

Accessibility

Component meets WCAG AA guidelines for accessibility on:

• Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
• UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
• Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research and evidence

We tested all variations of the alert component on an "In consultation Comment Collection" prototype in 2021. Users understood the purpose of the alerts and were able to use them.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

• Share your research or feedback on GitHub
• Propose a change

Need help?

If you've got a question about the NICE Design System, contact the team.

• If you work for NICE, ask us a question in our Teams channel
• If you work outside of NICE, you can get in touch with us via Github discussions