Skip to main content

Alert

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


Informative Alert

Component Preview

Informative status

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


Component Code

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

Warning Alert

Component Preview

Warning status

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


Component Code

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

Success Alert

Component Preview

Success status

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


Component Code

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

Error Alert

Component Preview


Component Code

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

Emergency Alert

Component Preview


Component Code

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

Slim Alert

Component Preview

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


Component Code

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

Alert with No Icon

Component Preview

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


Component Code

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


Guidance

When to use the alert component

System status messages.
An alert may be a notification that keeps people informed of the status of the system and may or may not require the user to respond. Such notifications may be errors, warnings, and general updates.
Validation messages.
An alert may be a validation message that informs a user they just took an action that needs to be corrected or a 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 action 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.
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.
Understand the user's context.
Don't include notifications that aren't related to the user's current goal.

Accessibility guidance

Don't visually hide alert messages.
Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.
Use the proper ARIA role.
The ARIA role attribute can notify assistive technologies of time-sensitive and important messages. Use role="alert" for error and emergency alerts, role="status" for success alerts, and role="region" for informative or warning alerts.

USWDS Documentation

For more guidance, view the USWDS Alert Component Documentation.



Settings

Variable Description
$theme-alert-bar-width Width of the colored bar to the left of the alert.
$theme-alert-font-family Font family of the alert.
$theme-alert-icon-size Size of the alert icon.
$theme-alert-padding-x Padding on the left and right of the alert.
$theme-alert-padding-y Padding on the top and bottom of the alert.
$theme-alert-text-color Text color on light backgrounds.
$theme-alert-link-color Link color on light backgrounds.
$theme-alert-text-reverse-color Text color on dark backgrounds.
$theme-alert-link-reverse-color Link color on dark backgrounds.


Variants

Variant Description
.usa-alert--info Display an informational status alert.
.usa-alert--warning Display a warning status alert.
.usa-alert--success Display a success status alert.
.usa-alert--error Display an error status alert.
.usa-alert--emergency Display an emergency status alert.
.usa-alert--slim Display a slimmer version of the alert.
.usa-alert--no-icon Display an alert without an icon.
Looking for U.S. government information and services?
Visit USA.gov