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/button-group.md.
A3S UI
  • English
  • next

      • Button Group

      Button Group joins adjacent actions that operate on the same object and have the same hierarchy, while every action keeps its own name, focus, and native behavior.

      Message actions
      Quarterly planningMessage from the release teamToday, 09:42
      No message action selected.

      Usage

      Import Tailwind, Button Group structure, Button structure, and one visual style bundle. The complete a3s.css bundle already includes these component files.

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

      Group controls only when they act on the same object, appear at the same hierarchy, and benefit from one continuous boundary. Give the root a task-specific accessible name.

      <div role="group" aria-label="Message actions" class="button-group">
  <button type="button" class="btn" data-variant="outline">Archive</button>
  <button type="button" class="btn" data-variant="outline">Snooze</button>
  <button type="button" class="btn" data-variant="outline">Mark unread</button>
</div>

      Parameters

      APIValuesPurpose
      Root<div role="group">Exposes one related action collection without changing child behavior
      class="button-group"RequiredJoins the boundaries of direct child controls
      aria-label or aria-labelledbyRequired when no visible group label names the taskNames the shared object or task
      data-orientationhorizontal, verticalDefaults to horizontal; use vertical only when the task or available space requires it
      Direct child hr[role="separator"]Optional and aria-hidden="true"Adds a visual split between a primary action and its menu trigger

      Button Group has no JavaScript controller, methods, custom events, React hook, or Vue composable. Each child owns its native activation; the host owns action state and results. The React and Vue adapters add the same div, role="group", and button-group class without another wrapper.

      States and variants

      Orientation

      Horizontal is the default for a short row of peer actions. Vertical groups are appropriate when the commands describe a spatial sequence or the owning region is intentionally narrow. Do not mix button heights inside one group.

      Horizontal and vertical actions
      Revision history
      Object order

      Split action

      A split action combines one immediately executable command with a separately named menu trigger. Button Group owns only their joined geometry; Dropdown Menu owns popup focus, keyboard navigation, collision handling, and focus return.

      Publish split action
      Ready to publish.

      Long labels and availability

      An unavailable child remains visibly named and natively disabled. Keep the reason adjacent and persistent; do not disable the root or rely on a tooltip. Text actions may shrink and wrap together at narrow widths instead of forcing document-level horizontal scrolling.

      Constrained release actions

      Production deployment becomes available after security review passes.

      RTL

      Button Group follows DOM order through logical start and end edges. The first action appears at inline start in either direction. Mirror only directional icons whose meaning is spatial; object, status, brand, plus, and delete icons keep their original shape.

      Accessibility and ownership

      Every child keeps an independent accessible name, focus indicator, disabled state, and native Tab stop. Button Group does not add roving arrow-key navigation or convert several actions into one control. Use Tabs or a segmented selection component for mutually exclusive views, Toggle Group for independent format states, Input Group for a value with prefixes or suffix actions, Pagination for page navigation, and Toolbar when several separate action groups share a command row.

      At 200% zoom and 320px width, the group must stay inside its owning region without double borders, clipped labels, or a page scrollbar. On coarse pointers, every child still meets the Button touch-target contract. A fully unavailable group disables each child individually so assistive technology receives the real availability of every command.