Alert banner

An alert banner displays a special message at the beginning of a page. The message is urgent and time sensitive.

Types of alerts:

Information alert such as an important public health update
Warning alert such as severe weather
Success alert such as a confirmation of an email sent
Error alert such as a lost server connection where local changes are not saved

Primary alert heading

Text describing information relevant to the majority of visitors of the page.

HTML

  <div 
      class="hc-alert" 
      role="region" 
      aria-labelledby="alert-banner-heading" 
      aria-live="polite"
    >
      <div class="hc-alert-content">
        <h2 id="alert-banner-heading" class="hc-alert-heading">
          Primary alert heading
        </h2>
        <p class="hc-alert-paragraph">
          Text describing information relevant to the majority of visitors of the page.
        </p>
      </div>
      <button 
        type="button" 
        class="hc-button hc-alert-close-button" 
        aria-label="Close alert"
      >
        Close&nbsp;<span aria-hidden="true">×</span>
      </button>
    </div>

Import

Label

When to use

To immediately communicate an important danger or warning message to all users
To state a system status or update
To inform a specific user of a critical event that needs immediate attention
To announce non-urgent information relevant to all users
To give a specific user a status update of their action

When not to use

Use sparingly. Users often miss them due to banner blindness and selective attention.
Do not use alert banners for validation errors. That can disrupt and distract users. Instead use an error message. For information about error messages, visit the Validation component page.
Avoid using them for destructive action such as permanently deleting a file. For information about destructive action messages, visit the Modal component page.

Open all

Accessibility for alert banner

Use proper ARIA roles.

This will inform users on assistive technologies of the banner message's urgency:

role=”alert” for requiring immediate attention
role=”status” for important but non-urgent information
role=”region” for highlighting general information and updates

This requires an aria-label or aria-labelledby attribute. The attribute will help further explain the message. Be sure to match the aria-labelledby attribute to its corresponding id on the heading element.

For messages longer than one line, use the appropriate heading level. This will help structure the content of the message.

Best practices for alert banner

Locate alert banners before the <H1> at the top of the screen. This will make them easier to find.

Make sure the alert banner is the same length as the other components on the screen.

Give users an option to dismiss an alert banner if appropriate.

Use different colors for different types of banners:

Urgent messages: red and orange
General information: blue and grey
Success alerts: green

Open all