Sticky Bar

<div
  class="surface-default"
  style="
    border-top: 1px solid var(--tng-color-border-contrast-default);
  "
>
  <div class="p-xl fg-error-default">
    <div
      class="tng-flex flex-wrap gap-2xl align-items-center justify-content-between"
    >
      <p class="flex-grow-5 | tng-text-body pb-md">
        Something went awefully wrong. Please try again.
      </p>
      <button class="flex-grow-1 | tng-button">Oh well</button>
    </div>
  </div>
</div>

Something went awefully wrong. Please try again.

Oh well

Recipes

Sticky Bottom Bar

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Show Sticky Bar

source code

Accessibility

Roles & attributes

• The sticky bar uses role="alert" and aria-live="polite" so screen readers announce it when it appears.
• The trigger button has aria-expanded and aria-controls linking to the bar’s id.

Content obstruction

• Ensure the sticky bar does not permanently obscure focusable page content. Users must be able to dismiss it.
• The dismiss button must have an accessible name.

Focus management

After dismissing, return focus to the trigger button so keyboard users are not disoriented.