Alert Banner

Displays high-priority announcements and emergency messages. Dismissable. 200 character max.

WCAG 2.2 AA Reviewed April 2026

Dismissed alerts are remembered for the current browser session. Add data-txds-alert-id="your-stable-id" when you need a persistent key that survives content edits or alert reordering on the page.

Do / Don't

✅ Do	🚫 Don't
Use Danger (red) for system failures or critical blocking issues	Use Danger for general announcements or informational messages
Use Warning (yellow) for cautionary messages that require attention	Use Warning for errors or emergencies
Use Information (dark blue) for general announcements	Use Information for urgent or safety-related issues
Keep message under 200 characters	Write long paragraphs in an alert banner
Display only one alert banner at a time	Stack multiple banners on the same page
Use the Filled style as the default	Use the No Fill style on a white background (lacks contrast)

Danger — Filled

View HTML

<div class="txds-alert-banner txds-alert-banner--danger" role="alert">
  <span class="txds-alert-banner__icon" aria-hidden="true">
    <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
  </span>
  <p class="txds-alert-banner__text">Danger: Evacuate the building immediately and proceed to the nearest safe assembly area.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">&times;</button>
</div>

Danger — No Fill

View HTML

<div class="txds-alert-banner txds-alert-banner--danger txds-alert-banner--open" role="alert">
  <span class="txds-alert-banner__icon" aria-hidden="true">
    <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
  </span>
  <p class="txds-alert-banner__text">Danger: Evacuate the building immediately and proceed to the nearest safe assembly area.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">&times;</button>
</div>

Warning — Filled

View HTML

<div class="txds-alert-banner txds-alert-banner--warning" role="alert">
  <span class="txds-alert-banner__icon" aria-hidden="true">
    <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
  </span>
  <p class="txds-alert-banner__text">Warning: Scheduled maintenance tonight from 10:00 p.m. to 12:00 a.m. may temporarily impact online services.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">&times;</button>
</div>

Warning — No Fill

View HTML

<div class="txds-alert-banner txds-alert-banner--warning txds-alert-banner--open" role="alert">
  <span class="txds-alert-banner__icon" aria-hidden="true">
    <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
  </span>
  <p class="txds-alert-banner__text">Warning: Scheduled maintenance tonight from 10:00 p.m. to 12:00 a.m. may temporarily impact online services.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">&times;</button>
</div>

Information — Filled

View HTML

<div class="txds-alert-banner txds-alert-banner--information" role="status">
  <span class="txds-alert-banner__icon" aria-hidden="true">
    <i class="bi bi-info-circle" aria-hidden="true"></i>
  </span>
  <p class="txds-alert-banner__text">Information: New grant application guidance is now available on the program resources page.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">&times;</button>
</div>

Information — No Fill

View HTML

<div class="txds-alert-banner txds-alert-banner--information txds-alert-banner--open" role="status">
  <span class="txds-alert-banner__icon" aria-hidden="true">
    <i class="bi bi-info-circle" aria-hidden="true"></i>
  </span>
  <p class="txds-alert-banner__text">Information: New grant application guidance is now available on the program resources page.</p>
  <button type="button" class="txds-alert-banner__close" aria-label="Dismiss alert">&times;</button>
</div>

CSS Classes

Class	Description
`txds-alert-banner`	Base alert banner container. Required on all alert banners.
`txds-alert-banner--danger`	Danger state (red). Use for critical issues.
`txds-alert-banner--warning`	Warning state (yellow). Use for cautionary messages.
`txds-alert-banner--information`	Information state (dark blue). Use for general announcements.
`txds-alert-banner--open`	No Fill style — transparent background with no visible border. Default (no modifier) is Filled.
`txds-alert-banner__icon`	Icon container (24 × 24).
`txds-alert-banner__text`	Banner message text (16px extrabold).
`txds-alert-banner__close`	Dismiss button with an × icon.