Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Button Toggle

<tng-button-toggle-group> and <tng-button-toggle> give you segmented controls and multi-select toolbars with ready-to-ship styling. The component surface keeps group semantics, keyboard behavior, and pressed state handling in place while letting your app restyle the host with semantic tokens.

Choose Button Toggle when the user is choosing between presented options or filters with visible labels. If each control is just a compact on/off action, such as bold, mute, or pin sidebar, Toggle is the better fit.

If you need direct access to state selectors such as data-selected on the actual button element, move down to Headless > Form > Button Toggle or use the ownable install.

Component import

ts
import { TngButtonToggleComponent, TngButtonToggleGroupComponent } from '@tailng-ui/components';

Usage patterns

Use the group wrapper for single-select segmented controls and multi-select toolbars. The wrapper surfaces valueChange for single mode and valuesChange for multiple mode.

Single-select group

html
<tng-button-toggle-group
  ariaLabel="Density selection"
  [value]="density()"
  (valueChange)="onDensityChange($event)"
>
  <tng-button-toggle [tngButtonToggleValue]="'compact'">Compact</tng-button-toggle>
  <tng-button-toggle [tngButtonToggleValue]="'comfortable'">Comfortable</tng-button-toggle>
  <tng-button-toggle [tngButtonToggleValue]="'spacious'">Spacious</tng-button-toggle>
</tng-button-toggle-group>

Multi-select group

html
<tng-button-toggle-group
  ariaLabel="Feature filters"
  type="multiple"
  [values]="filters()"
  (valuesChange)="onFiltersChange($event)"
>
  <tng-button-toggle [tngButtonToggleValue]="'a11y'">Accessibility</tng-button-toggle>
  <tng-button-toggle [tngButtonToggleValue]="'signals'">Signals</tng-button-toggle>
  <tng-button-toggle [tngButtonToggleValue]="'analytics'">Analytics</tng-button-toggle>
</tng-button-toggle-group>

Style variants

The same component contract can sit inside a plain CSS shell or a Tailwind shell without changing the API.

Density controls (Plain-CSS)

Editor density

Choose how compact the writing workspace should feel.

Selected: comfortable

Accessibility baseline

  • Single-select groups expose radio semantics; multi-select groups expose pressed button semantics.
  • Arrow keys, Home, and End are handled by the group wrapper, so segmented controls behave predictably without extra wiring.
  • Host-level semantic tokens are the supported component styling surface. Use headless or ownable if you need DOM-level state selectors.