Notifications

Overview

A notification or alert makes sure important information gets to the user. Notifications and alerts have several variations. They are defined by colored text, a colored background block, and an icon. The colored box takes the focus away from the rest of the page and “forces” the user to read the message.

These notification and alerts guidelines are designed to ensure consistently across USAC platforms.

If you do not submit your form on time, you will not receive funding.

html

Copy to Clipboard

<div class="indi-notification">
    <svg class="indi-icon" aria-labelledby="title">
        <title>information</title>
        <use xlink:href="/assets/icons/indi_icons.svg#information">
    </svg> If you do not submit your form on time, you will not receive funding.</div>

Notifications are orange with gray text and use the “Information” icon. They provide information that is additional to the main content of the page and has no positive or negative connotation.

Success Messages

Your form has been submitted.

html

Copy to Clipboard

<div class="indi-notification indi-notification--success">
    <svg class="indi-icon" aria-labelledby="title">
        <title>success</title>
        <use xlink:href="/assets/icons/indi_icons.svg#success">
    </svg> Your form has been submitted.</div>

Success messages are green with gray text, use the “Success” icon, and appear after a user has completed an action or task successfully. This alert has a positive connotation.

Do not overuse this alert. Not every action needs a success alert.

Alerts

There is missing information in your form. Please go back and add it before attempting to submit again.

html

Copy to Clipboard

<div class="indi-notification indi-notification--error">
    <svg class="indi-icon" aria-labelledby="title">
        <title>warning</title>
        <use xlink:href="/assets/icons/indi_icons.svg#warning">
    </svg> There is missing information in your form. Please go back and add it before attempting to submit again.</div>

Alerts are light red with red text and use the “Warning” icon. They appear when a user has done something wrong on the page and they need to fix it. This alert has a negative connotation.

This alert can be combined with Text Input Errors.

Use Guidelines

Use When

Notification: Notifying a user that they must complete a specific, required action.
Success message: Confirming a user’s successful action.
Alert: Alerting the user that there are errors in multiple data fields that need their attention.

Don't Use When

You need too many notifications and alerts on one page. For example:
- Only use one alert message per page.
- Only use one success message per page.
- You can use one notification and one alert message on a page.
- You can use one notification and one success message on a page.
- You can NOT use alerts and success messages on the same page.
Alert: There is a single error in a data field. See Text Input Errors.
Success: There is a success messages when a user fixes a validation error.

Editorial

Strive for short, succinct, and clear text. Avoid lengthy notification and alert boxes.

Accessibility

Notification: Always use orange with gray text yellow block.
Success: Always use green block with gray text.
Alerts: Always use light red block with red text.