Alert

Use an Alert component to display important messages to users.

<div class="tng-alert">
  <div class="tng-alert-header">
    <i aria-hidden="true" class="tng-icon icon-info"></i>
    <h4 class="tng-alert-title">Alert Title</h4>
    <button class="tng-icon-button is-neutral" aria-label="Close">
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
  </div>
  <div class="tng-alert-body">
    <p class="tng-text-body">…</p>
  </div>
  <div class="tng-alert-footer">
    <a class="tng-link" href="#">Link 1</a>
    <a class="tng-link" href="#">Link 2</a>
  </div>
</div>

Alert Title

Ea reprehenderit qui mollit. Magna quis veniam ea est deserunt labore eu ullamco ea ex cupidatat ullamco exercitation esse. Anim amet mollit qui mollit reprehenderit nisi commodo occaecat. Laboris esse ex amet consequat proident officia id velit cupidatat nostrud deserunt ipsum proident. Enim exercitation qui sunt.

Link 1 Link 2

Schemes

<div class="tng-alert is-error">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

<div class="tng-alert is-info">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

<div class="tng-alert is-success">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

<div class="tng-alert is-warning">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Accessibility

Roles

Role	Use for
role="alert"	Urgent messages (errors, warnings) that need immediate screen-reader announcement. Implies aria-live="assertive".
role="status"	Informational or success messages that are less urgent. Implies aria-live="polite".

Color is not enough

Never rely on color alone to convey meaning. Always pair the scheme (is-error, is-warning, is-info, is-success) with an icon and text. This ensures the message is accessible to users with color vision deficiencies.

Dismiss

• The close button must have an accessible label (e.g. aria-label="Close").
• After dismissing an alert, move focus to a logical location — the element that triggered the alert or the next piece of content.