Button Toggle

The ownable Button Toggle install brings the group wrapper, item wrapper, and local styles into your app so segmented controls and formatting toolbars can evolve with product-specific UX.

Why own Button Toggle locally

Toggle groups often become product-shaped quickly once teams add icons, badges, analytics, or custom spacing rules. Owning the wrapper locally keeps those adjustments close to the feature code.

Adapt segmented controls and editor toolbars without waiting on a package release.
Keep custom selection visuals, helper copy, and layout density rules near the feature.
Iterate on group-specific markup while preserving the TailNG interaction contract.

What the install includes

The registry-backed install writes the local group component, item component, styles, and barrel exports under your app so the generated source can evolve with the surrounding product UI.

Ownable Install

Install Button Toggle from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add button-toggle

npx tailng add button-toggle

Generated files

The command scaffolds local files under src/app/tailng-ui/button-toggle.

src/app/tailng-ui/button-toggle/tng-button-toggle-primitive.ts
src/app/tailng-ui/button-toggle/tng-button-toggle.ts
src/app/tailng-ui/button-toggle/tng-button-toggle.html
src/app/tailng-ui/button-toggle/tng-button-toggle.css
src/app/tailng-ui/button-toggle/tng-button-toggle-group.ts
src/app/tailng-ui/button-toggle/tng-button-toggle-group.html
src/app/tailng-ui/button-toggle/tng-button-toggle-group.css
src/app/tailng-ui/button-toggle/index.ts

Import in your feature module/component

import { TngButtonToggle, TngButtonToggleGroup, TngButtonTogglePrimitive, TngButtonToggleGroupPrimitive } from './tailng-ui/button-toggle';

Usage

<tng-button-toggle-group
  type="single"
  [value]="align()"
  (valueChange)="onAlignChange($event)"
>
  <tng-button-toggle value="left">Left</tng-button-toggle>
  <tng-button-toggle value="center">Center</tng-button-toggle>
  <tng-button-toggle value="right">Right</tng-button-toggle>
</tng-button-toggle-group>