Toggle
A two-state button that can be either on or off
Divergence from Blok
Missing square/rounded variants, the xs size, and Blok's pressed-state icon swap. Blok exports three variant shapes (default, square, rounded) and four sizes (xs/sm/md/lg); we ship the default shape only plus sm/md/lg. Blok also ships a helper-driven "icon-swap on pressed" animation (hasTextContent, isFirstChildIcon, extractFirstIcon utility functions replace the child icon with a check mark when pressed) — we don't implement that swap. Basic on/off toggling, styling, and Pressed/PressedChanged binding match Blok.
Examples
Default
Outline variant
Sizes
Disabled
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Toggle | A standalone two-state <button> with Blok's variant and size tokens. Use Pressed/PressedChanged (or @bind-Pressed) to drive the on/off state. |
Toggle
A standalone two-state <button> with Blok's variant and size tokens. Use Pressed/PressedChanged (or @bind-Pressed) to drive the on/off state.
| Property | Type | Required | Description |
|---|---|---|---|
| Pressed | bool | Current on/off state. Supports two-way binding via @bind-Pressed. Default: false. | |
| PressedChanged | EventCallback<bool> | Fires when the toggle is clicked with the new pressed value. | |
| Variant | ToggleVariant | Visual style. Default: ToggleVariant.Default. Other value: Outline. | |
| Size | ToggleSize | Size token. Default: ToggleSize.Default. Other values: Sm, Lg. | |
| Disabled | bool | When true, the toggle is non-interactive and visually muted. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the button. | |
| ChildContent | RenderFragment? | Button contents — typically an icon, short text, or both. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying <button>. |