Toggle group

A group of toggle buttons.

import { BuiToggleGroup, BuiToggleGroupItem } from 'ng-blatui';

<bui-toggle-group [(value)]="align">
  <button buiToggleGroupItem value="left">Left</button>
  <button buiToggleGroupItem value="center">Center</button>
  <button buiToggleGroupItem value="right">Right</button>
</bui-toggle-group>

Multiple

<!-- type="multiple" → value is an array -->
<bui-toggle-group type="multiple" [(value)]="styles">
  <button buiToggleGroupItem value="bold">B</button>
  <button buiToggleGroupItem value="italic">I</button>
</bui-toggle-group>

Vertical

<bui-toggle-group orientation="vertical" [(value)]="align">…</bui-toggle-group>

Disabled

<bui-toggle-group [value]="'center'">
  <button buiToggleGroupItem value="left" [disabled]="true">Left</button>
</bui-toggle-group>

Sizes

<!-- size each item via classes (h-8/text-xs … h-11/px-4) -->
<bui-toggle-group [(value)]="v">
  <button buiToggleGroupItem value="a" class="h-8 min-w-8 px-2 text-xs">S</button>
</bui-toggle-group>

Segmented

<!-- pill/segmented look: muted container + rounded items -->
<bui-toggle-group [(value)]="v" class="rounded-lg bg-muted p-1">
  <button buiToggleGroupItem value="list" class="rounded-md border-0 data-[state=on]:bg-background data-[state=on]:shadow-sm">List</button>
</bui-toggle-group>