The Toggle component provides a pressable button that can be toggled on or off, useful for toolbar buttons and filter toggles.

Installation

shellui add toggle

Usage

Basic

<Toggle Pressed="@isPressed" PressedChanged="@HandleChanged">
  Toggle Me
</Toggle>

@code {
    private bool isPressed = false;

    private void HandleChanged(bool value)
    {
        isPressed = value;
    }
}

Two-way Binding

<Toggle @bind-Pressed="isToggled">
  @(isToggled ? "On" : "Off")
</Toggle>

@code {
    private bool isToggled = false;
}

Variants

<Toggle @bind-Pressed="pressed" Variant="ToggleVariant.Default">Default</Toggle>
<Toggle @bind-Pressed="pressed" Variant="ToggleVariant.Outline">Outline</Toggle>

@code {
    private bool pressed = false;
}

Sizes

<div class="flex items-center gap-4">
  <Toggle @bind-Pressed="pressed" Size="ToggleSize.Sm">Small</Toggle>
  <Toggle @bind-Pressed="pressed" Size="ToggleSize.Default">Default</Toggle>
  <Toggle @bind-Pressed="pressed" Size="ToggleSize.Lg">Large</Toggle>
</div>

@code {
    private bool pressed = false;
}

<div class="flex items-center gap-2 p-2 border rounded-lg">
  <Toggle @bind-Pressed="bold" Size="ToggleSize.Sm">
    <span class="font-bold">B</span>
  </Toggle>
  <Toggle @bind-Pressed="italic" Size="ToggleSize.Sm">
    <span class="italic">I</span>
  </Toggle>
  <Toggle @bind-Pressed="underline" Size="ToggleSize.Sm">
    <span class="underline">U</span>
  </Toggle>
</div>

@code {
    private bool bold = false;
    private bool italic = false;
    private bool underline = false;
}

Disabled

<Toggle Pressed="true" Disabled="true">Disabled</Toggle>

API Reference

Parameter	Type	Default	Description
`Pressed`	`bool`	`false`	Pressed/toggled state
`PressedChanged`	`EventCallback<bool>`	—	Fires when pressed state changes
`Variant`	`ToggleVariant`	`Default`	Visual style: `Default`, `Outline`
`Size`	`ToggleSize`	`Default`	Toggle size: `Default`, `Sm`, `Lg`
`Disabled`	`bool`	`false`	Disables the toggle
`ChildContent`	`RenderFragment`	`null`	Toggle content

Accessibility

Uses semantic <button> element
aria-pressed attribute reflects state
Keyboard navigation support
Screen reader compatible

Toggle

On this page