Headless button toggle

Headless button toggle gives you a roving-focus group and stateful toggle buttons without prescribing the visual shell. Use it when the selection model matters more than the default component chrome.

Choose tngButtonToggle when users are choosing between visible options or filters. If each control is just a compact pressed action with no need for a labeled segmented choice, Headless Toggle is usually the simpler fit.

• single mode behaves like a radio group with one active value.
• multiple mode exposes pressed-button semantics for toolbars and filters.
• State attributes like data-selected and data-focused are stable styling hooks.

Installation

Import the group and item primitives together so keyboard and selection behavior stay aligned.

import { TngButtonToggle, TngButtonToggleGroup } from '@tailng-ui/primitives';

Basic usage

Single-select groups use valueChange; multiple groups use valuesChange.

<div
  tngButtonToggleGroup
  type="single"
  [tngButtonToggleValue]="density()"
  (valueChange)="onDensityChange($event)"
>
  <button tngButtonToggle tngButtonToggleValue="compact">Compact</button>
  <button tngButtonToggle tngButtonToggleValue="comfortable">Comfortable</button>
  <button tngButtonToggle tngButtonToggleValue="spacious">Spacious</button>
</div>

<div
  tngButtonToggleGroup
  type="multiple"
  [tngButtonToggleValues]="filters()"
  (valuesChange)="onFiltersChange($event)"
>
  <button tngButtonToggle tngButtonToggleValue="a11y">Accessibility</button>
  <button tngButtonToggle tngButtonToggleValue="signals">Signals</button>
  <button tngButtonToggle tngButtonToggleValue="dx">DX</button>
</div>

Accessibility baseline

• Single groups expose radiogroup and item role="radio".
• Multiple groups stay at role="group" with aria-pressed on each item.
• Arrow keys, Home, and End move focus across the group without additional wiring.