Alerts

Alerts keep users informed of important and sometimes time-sensitive changes.

Alert Usage

In the application user interface, alerts should be used whenever a user initiates an action and returns to the same place once the action is complete or fails.

If the action is part of a flow, meaning the user will advance to another step or fail out, a separate screen or view should be used to indicate success of failure.

Visit the USWDS Alerts component page for more information and usage examples

Types of Alerts

Success

<div class="usa-alert usa-alert--success">
  <div class="usa-alert__body">
    <p class="usa-alert__text">Banner text</p>
  </div>
</div>

Warning

<div class="usa-alert usa-alert--warning">
  <div class="usa-alert__body">
    <p class="usa-alert__text">Banner text</p>
  </div>
</div>

Error

<div class="usa-alert usa-alert--error">
  <div class="usa-alert__body">
    <p class="usa-alert__text">Banner text</p>
  </div>
</div>

Information

<div class="usa-alert usa-alert--info">
  <div class="usa-alert__body">
    <p class="usa-alert__text">Banner text</p>
  </div>
</div>

Other

<div class="usa-alert usa-alert--other">
  <div class="usa-alert__body">
    <p class="usa-alert__text">Banner text</p>
  </div>
</div>

Limiting Alert Width

If desired for aesthetics, the background coloring for alerts can be constrained to the width of a paragraph by appending the usa-alert__paragraph class to the usa-alert container.

Without the usa-alert__paragraph class, alert messages can look a little silly when used with paragraph text:

This is a following paragraph, to demostrate the width of the above alert message more clearly.