For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/status-bar.md.
A3S UI
  • English
  • next

      • Status Bar

      A Status Bar keeps document state, view controls, and zoom information available without competing with the primary workspace.

      Live previewHTML · CSS · JavaScript

      Document canvas

      Page 1 of 12132 wordsSaved
      90%

      Usage

      <footer class="status-bar" aria-label="Document status">
  <div data-status-info><span data-status-priority="low">Page 1 of 12</span><span>Saved</span></div>
  <div data-status-actions>...</div>
</footer>

      Parameters

      ParameterRequiredPurpose
      data-status-infoYesFlexible resource and save-state information
      data-status-actionsOptionalView, zoom, or navigation controls
      data-status-priority="low"OptionalHides nonessential status items below 30rem
      --status-bar-heightOptionalStatus bar height, default 1.75rem

      States and variants

      Keep status copy terse and stable. The default 28-pixel bar uses a fixed flex basis so it remains anchored to the workspace edge instead of growing with its controls. Mark expendable context with data-status-priority="low" so save state and actions remain intact on narrow screens. Use semantic text colors for transient save or validation states, and aria-pressed for view-mode controls.

      Accessibility

      Name the Status Bar when the page contains several landmark footers. Associate every range input and icon button with an accessible name, and announce asynchronous save failures through a separate live region.