Skip to main content
Hennepin County Design System

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.


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



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

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.

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