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

Toggle

The component layer gives you compact, icon-slot-based toggles and a matching toggle-group wrapper so you can ship toolbar actions and mode pickers without recreating the primitive contract yourself.

Choose Toggle when each control is an action on its own, such as pinning a sidebar or enabling bold. If the user is choosing between labeled options like Compact, Comfortable, and Spacious, move to Button Toggle instead.

Component imports

ts
import { TngToggleComponent, TngToggleGroupComponent } from '@tailng-ui/components';

Usage patterns

Use <tng-toggle> for standalone pressed actions, and add <tng-toggle-group> with item value bindings when selection should be coordinated.

Standalone pressed action

html
<tng-toggle
  [pressed]="sidebarPinned()"
  pressedLabel="Unpin sidebar"
  unpressedLabel="Pin sidebar"
  (pressedChange)="sidebarPinned.set($event)"
>
  <span offIcon>P</span>
  <span onIcon>P</span>
</tng-toggle>

Grouped selection

html
<tng-toggle-group
  selectionMode="single"
  ariaLabel="Editor density"
  [value]="density()"
  (valueChange)="onDensityChange($event)"
>
  <tng-toggle
    [value]="'compact'"
    pressedLabel="Compact density selected"
    unpressedLabel="Select compact density"
  >
    <span offIcon>C</span>
    <span onIcon>C</span>
  </tng-toggle>
  <tng-toggle
    [value]="'comfortable'"
    pressedLabel="Comfortable density selected"
    unpressedLabel="Select comfortable density"
  >
    <span offIcon>M</span>
    <span onIcon>M</span>
  </tng-toggle>
</tng-toggle-group>

Style variants

The same toggle-group contract can sit inside a plain CSS shell or a Tailwind utility shell without changing the API.

Editor density (Plain-CSS)

Writing workspace

Editor density

Choose how compact the writing workspace should feel.

CompactFits more lines on screen.
ComfortableBalanced spacing for drafting.
SpaciousAdds breathing room for review.

Selected: comfortable

Accessibility baseline

  • Provide meaningful pressedLabel and unpressedLabel for icon-only toggles.
  • Inside a group, give each toggle a stable value so selection state can be coordinated.
  • Label groups with ariaLabel or ariaLabelledby when the surrounding copy is not enough.