Design System Preview

PATTERN NAME: Action Bar
COMPOSES: button.css (tw-btn variants)
CLASSES: tw-action-bar | tw-action-bar-start | tw-action-bar-center | tw-action-bar-end

A fixed bottom bar anchored to the viewport, offset from the sidebar (left: 4rem). Use for page-level primary actions that must always be accessible regardless of scroll position — wizard navigation, form save/cancel, or bulk-action confirmation.

Basic — Back + Primary Action

Standard wizard step: Back in .tw-action-bar-start, primary action in .tw-action-bar-end. The bar is position: fixed so it floats at the bottom of the viewport.

Page content scrolls here…


        <div class="tw-action-bar">

          <div class="tw-action-bar-start">

            <button class="tw-btn tw-btn-secondary" type="button">&larr; Back</button>

          </div>

          <div class="tw-action-bar-end">

            <button class="tw-btn tw-btn-primary" type="button">Next &rarr;</button>

          </div>

        </div>

With Center Status Text

Optional center slot: Use .tw-action-bar-center to display a count, status label, or progress hint between the start and end groups.

14 students selected


        <div class="tw-action-bar">

          <div class="tw-action-bar-start">...</div>

          <div class="tw-action-bar-center">

            <span class="tw:text-sm text-muted fw-semibold">14 students selected</span>

          </div>

          <div class="tw-action-bar-end">...</div>

        </div>

Primary Only — No Back Button

First step or standalone form: Leave .tw-action-bar-start empty when there is no previous step. The end actions right-align naturally.


        <div class="tw-action-bar">

          <div class="tw-action-bar-start"></div>

          <div class="tw-action-bar-end">

            <button class="tw-btn tw-btn-secondary" type="button">Cancel</button>

            <button class="tw-btn tw-btn-primary" type="button">Save Changes</button>

          </div>

        </div>

Post-Action — Bar Cleared

Final completion step: After a terminal action (e.g., "Schedule Release"), clear both start and end slots so the bar becomes invisible. The completion confirmation appears in the page body instead.

Offer release scheduled for 14 Mar 2026 at 9:00 AM.


        // After terminal action, clear slots via JS:

        document.getElementById('wizardActionBarStart').innerHTML = '';

        document.getElementById('wizardActionBarEnd').innerHTML = '';

Live Fixed Bar

Actual fixed bar visible on this page: The bar below uses real position: fixed and is offset from the sidebar. Scroll this preview to confirm it stays anchored to the bottom.

Scroll content area to verify the action bar below stays fixed…

Line 2 of placeholder content

Line 3 of placeholder content

Line 4 of placeholder content

Line 5 of placeholder content