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

API reference

The component surface is built on the same headless pair that powers roving focus and selection behavior. Reach for headless when you want DOM ownership; use the component pair when you want the same selection contract hosted directly on the wrapper plus a styled shell already in place.

Underlying primitives

tngButtonToggleGroup and tngButtonToggle remain the behavioral baseline underneath the component wrapper. The group wrapper forwards that primitive contract from its host, so grouped items participate in the same focus and selection model as the headless pair.

Primitive attachment

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

tng-button-toggle-group

The group wrapper hosts the primitive group behavior directly. That means selection mode, keyboard traversal, controlled values, and the analytics-focused outputs all come from the same contract you would use in headless composition.

Group attachment

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-group>
APITypeDetails
ariaLabelstringAccessible name for the group wrapper.
type'single' | 'multiple'Switches between single-select segmented controls and multi-select toolbars.
value, valuesT | null, readonly T[]Wrapper-level aliases for controlled single and multiple selection.
tngButtonToggleValue, tngButtonToggleValuesT | null, readonly T[] Explicit TailNG-prefixed aliases forwarded from the primitive group contract.
defaultValue, defaultValuesT | null, readonly T[]Uncontrolled initial selection for single and multiple groups.
allowEmpty, disabled, loopbooleanSelection clearing, disabled state, and keyboard wraparound.
orientation, dir, activationBehavior configKeyboard axis, LTR/RTL direction, and manual versus automatic selection.
valueChange, valuesChangeAngular outputsControlled-state updates for single and multiple groups.
toggleChange, focusChangeAngular outputsRicher event payloads for analytics, instrumentation, and focus tracking.

tng-button-toggle

The item wrapper can participate in a group or work as a standalone pressed button when the group wrapper is not present. Inside a group, pass item identity with [tngButtonToggleValue] or [value] and let the group own the selected state.

Standalone item

html
<tng-button-toggle
  [pressed]="isBold()"
  (pressedChange)="isBold.set($event)"
>
  Bold
</tng-button-toggle>
APITypeDetails
value, tngButtonToggleValuestring | number | nullStable identity for group selection. Prefer tngButtonToggleValue in grouped examples.
disabledbooleanBlocks interaction for standalone usage and forwards to the primitive button.
pressedbooleanStandalone pressed state when the item is not inside a group.
pressedChangebooleanStandalone output. Inside a group, selection comes from the wrapper outputs instead.
Projected contentLabel contentIcons, text, and badges can be projected without changing the group contract.