Toggle

The ownable Toggle install gives your app a local wrapper and editable source surface for compact pressed-button actions while keeping the TailNG interaction contract intact.

Why own Toggle locally

Toggles often accumulate product-specific copy, iconography, analytics hooks, and layout wrappers. Local ownership makes those product details easy to ship without waiting on a shared package release.

Adapt icon slots, helper labels, and surrounding layout for your product workflow.
Keep view-mode and toolbar wording close to the feature that owns the behavior.
Iterate on selected-state visuals while preserving the TailNG toggle semantics.

What the install includes

The registry-backed toggle install writes the local wrapper component, template, styles, and export barrel into your app so the generated files can evolve with the surrounding toolbar or mode-selection UX.

Ownable Install

Install 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 toggle

npx tailng add toggle

Generated files

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

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

Import in your feature module/component

import { TngToggle, TngTogglePrimitive } from './tailng-ui/toggle';

Usage

<tng-toggle-group
  selectionMode="single"
  [value]="viewMode"
  (valueChange)="viewMode = $event ?? viewMode"
>
  <tng-toggle [value]="'grid'">
    <span offIcon>G</span>
    <span onIcon>G</span>
  </tng-toggle>
  <tng-toggle [value]="'list'">
    <span offIcon>L</span>
    <span onIcon>L</span>
  </tng-toggle>
</tng-toggle-group>