Components / Toggle

Toggle

A two-state button that can be either on or off: aria-pressed, keyboard-operable, with data-pressed styling. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

razor
<ZitsToggle @bind-Pressed="_bold" aria-label="Toggle bold">
    <BoldIcon />
</ZitsToggle>

<ZitsToggle Variant="outline" aria-label="Toggle italic">
    <ItalicIcon />
</ZitsToggle>

@code { private bool _bold = true; }

Installation

Terminal bash
navius add toggle

API reference

Prop Type Default
Pressed bool false
DefaultPressed bool false
Disabled bool false
Variant string "default" | "outline"
Size string "default" | "sm" | "lg"
ChildContent RenderFragment? -