Button

Buttons trigger actions in the current interface. Use a link with href, styled as a button, when the outcome is navigation.

Workspace access2 pending changes

Reviewer access and deployment approval are ready to update.

Ready to save.

InstallTerminal

npm install @a3s-lab/ui@0.4.0

<section data-save-settings>
<p data-save-status aria-live="polite">Ready to save.</p>
<button type="button" class="btn" data-save-button>
  <span class="grid">
    <span class="col-start-1 row-start-1" data-idle-label>Save changes</span>
    <span class="invisible col-start-1 row-start-1 inline-flex items-center gap-1.5" data-progress-label aria-hidden="true">
      <svg data-icon="inline-start" class="animate-spin" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.22-8.56" /></svg>
      Saving…
    </span>
  </span>
</button>
</section>
<script type="module">
import { savePermissionChanges } from "./workspace.js";

const region = document.querySelector("[data-save-settings]");
const button = region.querySelector("[data-save-button]");
const status = region.querySelector("[data-save-status]");
const idle = button.querySelector("[data-idle-label]");
const progress = button.querySelector("[data-progress-label]");
let pending = false;

function setPending(nextPending) {
pending = nextPending;
button.disabled = nextPending;
button.toggleAttribute("aria-busy", nextPending);
idle.classList.toggle("invisible", nextPending);
idle.setAttribute("aria-hidden", String(nextPending));
progress.classList.toggle("invisible", !nextPending);
progress.setAttribute("aria-hidden", String(!nextPending));
}

button.addEventListener("click", async () => {
if (pending) return;
setPending(true);
status.textContent = "Saving permission changes…";
try {
await savePermissionChanges();
status.textContent = "Permission changes saved.";
} catch {
status.textContent = "Could not save changes. Check the connection and try again.";
} finally {
setPending(false);
}
});

</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Import Tailwind and the complete A3S style bundle:

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Then add the btn class to a native button. Set type="button" explicitly so a button does not submit a form by accident.

<button type="button" class="btn">Save changes</button>

For component-level loading, import the base styles, Button structure, and A3S visual style in that order. See Installation for CDN and other integration paths.

@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

Parameters

Parameter	Values	Purpose
Root element	`<button>` or `<a>`	Use a button for actions and a link for navigation
`class`	`btn`	Required component root class
`data-variant`	`primary`, `secondary`, `outline`, `ghost`, `link`, `destructive`	Sets action hierarchy; omission means primary
`data-size`	`xs`, `sm`, `default`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`	Sets target size and visual density
`data-icon`	`inline-start` or `inline-end`	Place on inline icons to correct text-button spacing
Native state	`disabled`, `aria-busy`, `aria-pressed`	Expresses unavailable, pending, and toggle states

Button has no JavaScript controller or dedicated framework hook. HTML, React, and Vue use the same native activation and state attributes; application state owns the asynchronous operation and its duplicate-submission guard.

States and variants

Keep one primary button in a decision region. Use secondary and outline for supporting actions, ghost for low-emphasis tools, and destructive only when the action has a clear destructive outcome. link is a visual variant; real navigation still uses <a href>.

<div class="flex flex-wrap items-center gap-2">
    <button type="button" class="btn">
      Primary
    </button>
    <button type="button" class="btn" data-variant="secondary">
      Secondary
    </button>
    <button type="button" class="btn" data-variant="outline">
      Outline
    </button>
    <button type="button" class="btn" data-variant="ghost">
      Ghost
    </button>
    <button type="button" class="btn" data-variant="link">
      Inline action
    </button>
    <button type="button" class="btn" data-variant="destructive">
      Delete
    </button>
  </div>

disabled prevents interaction. Async actions should pair visible progress text with aria-busy="true". Application state updates aria-pressed for toggle buttons; the component does not own that state.

<div class="flex flex-wrap items-center gap-2">
    <button type="button" class="btn" disabled>
      Unavailable
    </button>
    <button type="button" class="btn" aria-busy="true" disabled>
      <svg
        data-icon="inline-start"
        class="animate-spin"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      >
        <path d="M21 12a9 9 0 1 1-6.22-8.56" />
      </svg>
      Saving…
    </button>
    <button type="button" class="btn" data-variant="ghost" aria-pressed="true">
      Pinned
    </button>
  </div>

Sizes

Choose size from interface density, not action importance. Default fits standard pages, sm fits compact toolbars, and lg fits low-density or touch-first surfaces. Use an icon-* size only for icon-only buttons.

<div class="flex flex-wrap items-center gap-2">
    <button type="button" class="btn" data-variant="outline" data-size="xs">
      Extra small
    </button>
    <button type="button" class="btn" data-variant="outline" data-size="sm">
      Small
    </button>
    <button type="button" class="btn" data-variant="outline">
      Default
    </button>
    <button type="button" class="btn" data-variant="outline" data-size="lg">
      Large
    </button>
    <button
      type="button"
      class="btn"
      data-variant="outline"
      data-size="icon-sm"
      aria-label="Add"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      >
        <path d="M5 12h14M12 5v14" />
      </svg>
    </button>
    <button
      type="button"
      class="btn"
      data-variant="outline"
      data-size="icon"
      aria-label="Settings"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      >
        <circle cx="12" cy="12" r="3" />
        <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.2.37.56.72 1 .9.34.14.7.2 1.1.2h.09v4h-.09a1.7 1.7 0 0 0-1.1.4c-.44.35-.8.7-1 1Z" />
      </svg>
    </button>
  </div>

Icons and links

Set data-icon on an icon next to text. Icon-only buttons need a name through aria-label. Link buttons retain native link semantics and browser behavior.

View Button Group

<div class="flex flex-wrap items-center gap-2">
    <button type="button" class="btn" data-variant="outline">
      <svg
        data-icon="inline-start"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      >
        <path d="M12 5v14M5 12h14" />
      </svg>
      New project
    </button>
    <a class="btn" data-variant="secondary" href="./button-group.html">
      View Button Group
      <svg
        data-icon="inline-end"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      >
        <path d="m9 18 6-6-6-6" />
      </svg>
    </a>
    <button
      type="button"
      class="btn"
      data-variant="ghost"
      data-size="icon"
      aria-label="More actions"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <circle cx="5" cy="12" r="1.5" />
        <circle cx="12" cy="12" r="1.5" />
        <circle cx="19" cy="12" r="1.5" />
      </svg>
    </button>
  </div>

Accessibility

Use <button> for actions and <a href> for navigation. Do not imitate links with click handlers.
Every icon-only button needs an accessible name, usually through aria-label.
Keep a specific action label visible during loading, synchronize disabled with aria-busy="true", and set the duplicate-submission guard before awaiting host work.
Application state owns aria-pressed="true|false" for toggles. Buttons that reveal overlays use aria-expanded and aria-controls.
A destructive button communicates intent. When confirmation is required, pair it with Alert Dialog.
The A3S style pack provides one visible offset focus outline without a box-shadow halo. Do not remove it in application styles.

#Button

#Usage

#Parameters

#States and variants

#Sizes

#Icons and links