Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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

Banner text

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

Warning

Banner text

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

Error

Banner text

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

Information

Banner text

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

Other

Banner text

<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.

This “Other”-styled alert is constrained to the width of a paragraph. It works well when an alert is displayed in the context of a larger document, with paragraphs of text before or after it.

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

This “Other”-styled alert is full width. It can look a little silly when combined with paragraph-width text.

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