Components

Alert

An alert keeps users informed of important and sometimes time-sensitive changes.

Success status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Warning status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Informative status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="usa-alert usa-alert--success" >
  <div class="usa-alert__body">
    <h3 class="usa-alert__heading">Success status</h3>
    <p class="usa-alert__text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
  </div>
</div>

<div class="usa-alert usa-alert--warning" >
  <div class="usa-alert__body">
    <h3 class="usa-alert__heading">Warning status</h3>
    <p class="usa-alert__text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
  </div>
</div>

<div class="usa-alert usa-alert--error" role="alert">
  <div class="usa-alert__body">
    <h3 class="usa-alert__heading">Error status</h3>
    <p class="usa-alert__text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
  </div>
</div>

<div class="usa-alert usa-alert--info" >
  <div class="usa-alert__body">
    <h3 class="usa-alert__heading">Informative status</h3>
    <p class="usa-alert__text">Lorem ipsum dolor sit amet, <a href="javascript:void(0);">consectetur adipiscing</a> elit, sed do eiusmod.</p>
  </div>
</div>

When to use the alert component

  • System status messages. As a notification that keeps people informed of the status of the system and which may or may not require the user to respond. This includes errors, warnings, and general updates.
  • Validation messages. As a validation message that alerts someone that they just did something that needs to be corrected or as confirmation that a task was completed successfully.

When to consider something else

  • Long forms. On long forms, always include in-line validation in addition to any error messages that appear at the top of the form.
  • Destructive actions. If an action will result in destroying a user’s work (for example, deleting an application) use a more intrusive pattern, such as a confirmation modal dialogue, to allow the user to confirm that this is what they want.

Usability guidance

  • Consider next steps. When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code.
  • Be polite. Be polite in error messages — don’t blame the user.
  • Alerts are an opportunity. Users will read a message that helps them resolve an error even if they generally won’t read documentation; include some educational material in your error message.
  • Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.
  • Allow a user to dismiss a notification wherever appropriate.
  • Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.

Accessibility

  • Use the proper ARIA role. If the message is not interactive, use the ARIA role="alert" to inform assistive technologies of a time-sensitive and important message. If the message is interactive, use the use the ARIA role="alertdialog" instead.
  • Don’t visually hide alert messages and then make them visible when they are needed. Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.