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>