Toggle

A two-state button (aria-pressed).

import { BuiToggle } from 'ng-blatui';

<button buiToggle aria-label="Toggle bold"><svg><!-- bold --></svg></button>

Outline

<button buiToggle variant="outline" aria-label="Toggle italic"><svg><!-- italic --></svg></button>

Sizes

<button buiToggle size="sm" aria-label="Small">S</button>
<button buiToggle aria-label="Default">M</button>
<button buiToggle size="lg" aria-label="Large">L</button>

Rounded

<button buiToggle class="rounded-full" aria-label="Like"><svg><!-- heart --></svg></button>

With text

<button buiToggle aria-label="Toggle italic"><svg><!-- italic --></svg> Italic</button>

With count

<button buiToggle variant="outline" aria-label="Upvote">
  <svg><!-- arrow-up --></svg> Upvote <span class="tabular-nums">27</span>
</button>

Disabled

<button buiToggle [disabled]="true" aria-label="Bold">B</button>
<button buiToggle variant="outline" [disabled]="true" aria-label="Italic">I</button>

API reference

Inputs

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| null`	`'default'`	Visual style: plain or outlined.
`size`	`"default" \| "lg" \| "sm" \| null`	`'default'`	Button size.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`pressed`	`boolean`	`false`	Whether the toggle is pressed (on). Two-way bindable with `[(pressed)]`.
`disabled`	`boolean`	`false`	Whether the toggle is disabled. Two-way bindable with `[(disabled)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.