Alert banner

An alert banner displays an important message that helps keep users informed of timely or critical information.

You can display alert banners across a full site. You can also display them on certain pages where the alert relates only to the content on those pages.

There are 2 types of alerts:

Status messages: These keep users informed but don’t require them to take any action.
Validation messages: These respond to a user action, confirm success, or let the user know of an error that needs fixing.

Each type of alert uses a different color and icon to quickly show what kind of message it is:

Blue: Informational (for general updates or notices)
Yellow: Warning (something might affect the user)
Green: Success (an interaction worked as expected)
Red: Error (something went wrong or needs to be fixed)

Informational alert

Informational alerts keep users informed but don’t require them to take action.

Example: an important public health update.

Info alert heading

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

HTML

<div class="hc-alert hc-alert-info" role="region" aria-labelledby="alert-banner-heading" aria-live="polite">
<div class="hc-alert-icon-and-content">
<svg xmlns="http://www.w3.org/2000/svg" class="hc-icon-size--regular" viewbox="0 0 24 24" role="img" aria-label="Important">
<path d="M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#0C1555"></path>
</svg>
<div class="hc-alert-content">
<h2 id="alert-banner-heading" class="hc-alert-heading">
Info alert heading
</h2>
<p class="hc-alert-paragraph">
Text describing information relevant to the majority of visitors of the
page.
</p>
</div>
</div>
<button type="button" class="hc-button hc-alert-close-button" aria-label="Close alert">
Close
<svg xmlns="http://www.w3.org/2000/svg" height="24px" class="hc-icon-size--regular" viewbox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true">
<path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path>
</svg>
</button>
</div>

Import

Label

Warning alert

Warning alerts draw attention to something that might cause a problem if the user doesn’t address it.

Example: Your password will expire in 5 days. Update it now to avoid losing access.

Warning alert heading

Text indicating a potential issue or need for caution

HTML

<div class="hc-alert hc-alert-warning" role="alert" aria-labelledby="alert-banner5-heading" aria-live="assertive">
	<div class="hc-alert-icon-and-content">
		<svg xmlns="http://www.w3.org/2000/svg" class="hc-icon-size--regular" viewbox="0 0 24 24" role="img" alt="Warning">
			<path d="M1 21L12 2L23 21H1ZM12 18C12.2833 18 12.5208 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5208 16.0958 12.2833 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0958 16.4792 11 16.7167 11 17C11 17.2833 11.0958 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM11 15H13V10H11V15Z" fill="#78250F"></path>
		</svg>
		<div class="hc-alert-content">
			<h2 id="alert-banner5-heading" class="hc-alert-heading">
				Warning alert heading
			</h2>
			<p class="hc-alert-paragraph">
				Text indicating a potential issue or need for caution
			</p>
		</div>
	</div>
	<button type="button" class="hc-button hc-alert-close-button" aria-label="Close alert">
		Close
		<svg xmlns="http://www.w3.org/2000/svg" height="24px" class="hc-icon-size--regular" viewbox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true">
			<path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path>
		</svg>
	</button>
</div>

Import

Label

Success alert

Success alerts confirm the user completed an action successfully.

Example: a confirmation a form has been submitted.

Success alert heading

Text confirming an action has been successfully completed.

HTML

<div class="hc-alert hc-alert-success" role="status" aria-labelledby="alert-banner3-heading" aria-live="polite">
	<div class="hc-alert-icon-and-content">
		<svg xmlns="http://www.w3.org/2000/svg" class="hc-icon-size--regular" viewbox="0 0 24 24" role="img" alt="Success">
			<path d="M10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#085F33"></path>
		</svg>
		<div class="hc-alert-content">
			<h2 id="alert-banner3-heading" class="hc-alert-heading">
				Success alert heading
			</h2>
			<p class="hc-alert-paragraph">
				Text confirming an action has been successfully completed.
			</p>
		</div>
	</div>
	<button type="button" class="hc-button hc-alert-close-button" aria-label="Close alert">
		Close
		<svg xmlns="http://www.w3.org/2000/svg" height="24px" class="hc-icon-size--regular" viewbox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true">
			<path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path>
		</svg>
	</button>
</div>

Import

Label

Error alert

Error alerts tell the user something went wrong or needs fixing. For more details about validation for user input fields, visit Validation.

Sitewide example: a lost server connection.

Danger alert heading

Text describing an error or critical problem

HTML

<div class="hc-alert hc-alert-danger" role="alert" aria-labelledby="alert-banner4-heading" aria-live="polite">
	<div class="hc-alert-icon-and-content">
		<svg xmlns="http://www.w3.org/2000/svg" class="hc-icon-size--regular" viewbox="0 0 24 24" role="img" alt="Error">
			<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM8.25 21L3 15.75V8.25L8.25 3H15.75L21 8.25V15.75L15.75 21H8.25Z" fill="#88132D"></path>
		</svg>
		<div class="hc-alert-content">
			<h2 id="alert-banner4-heading" class="hc-alert-heading">
				Danger alert heading
			</h2>
			<p class="hc-alert-paragraph">
				Text describing an error or critical problem
			</p>
		</div>
	</div>

	<button type="button" class="hc-button hc-alert-close-button" aria-label="Close alert">
		Close
		<svg xmlns="http://www.w3.org/2000/svg" height="24px" class="hc-icon-size--regular" viewbox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true">
			<path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path>
		</svg>
	</button>
</div>

Import

Label

When to use

Informational alerts

To immediately communicate an important message to all users
To state a system status or update

Validation alerts

To give users clear feedback after they complete a process, like saving change
To reinforce a confirmation or success message

When not to use

Don't use alert banners for validation errors that disrupt users. Instead use an error message. For information about error messages, visit the Validation component page.
Avoid using alert banners for destructive action such as permanently deleting a file. For information about destructive action messages, visit the Modal component page.

Open all

Accessibility for error alert

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 error alert

Locate alert banners before the <H1> at the top of the screen. This will make them easier to find.
Use sparingly. Users often miss them due to banner blindness and selective attention.
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.

Write clear alert banners

People should be able to understand the message quickly.

Keep it short and specific.
Use simple, direct language.
Avoid acronyms and jargon.
Put the most important information first.
Keep the tone calm and helpful.
Focus on helping the user recover.
Avoid blaming the user.
Tell the user what to do next.
Make instructions clear and easy to follow.
Follow writing standards.
Avoid using all capital letters.

Open all