A shadcn/ui inspired Blazor component library

Installation

Add the ToggleButton component using the CLI:

shadcnblazor component add togglebutton

Usage

A button that toggles between two visual states (on/off). Uses Button internally. Bind IsToggled for two-way state, or use IsToggledChanged for one-way updates. Set VariantUntoggled and VariantToggled for the two states.

1

2

3

4

5

<ToggleButton @bind-IsToggled="_toggled">Toggle me</ToggleButton>

@code {
    private bool _toggled;
}

Examples

Variants

Use VariantUntoggled and VariantToggled to control the appearance in each state.

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="flex flex-wrap gap-4">
    <ToggleButton @bind-IsToggled="_toggled1" VariantUntoggled="@Variant.Outline" VariantToggled="@Variant.Default">
        Outline / Default
    </ToggleButton>
    <ToggleButton @bind-IsToggled="_toggled2" VariantUntoggled="@Variant.Ghost" VariantToggled="@Variant.Secondary">
        Ghost / Secondary
    </ToggleButton>
</div>

@code {
    private bool _toggled1;
    private bool _toggled2;
}

API Reference

ToggleButton

A button that toggles between two visual states (on/off).

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`ChildContent`	`RenderFragment`	The content rendered inside the button.
`Class`	`string`
`Disabled`	`bool`	When true, the button is disabled.
`IsToggled`	`bool`	Whether the button is currently toggled on. Use with for two-way binding.
`IsToggledChanged`	`EventCallback<bool>`	Callback fired when the toggled state changes. Use with for two-way binding.
`OnClick`	`EventCallback<MouseEventArgs>`	Callback fired when the button is clicked.
`Size`	`Size`	The size of the button.
`Type`	`ButtonType`	The HTML button type.
`VariantToggled`	`Variant`	The variant when the button is toggled on.
`VariantUntoggled`	`Variant`	The variant when the button is not toggled.

Events

Name	Type	Description
`IsToggledChanged`	`EventCallback<bool>`	Callback fired when the toggled state changes. Use with for two-way binding.
`OnClick`	`EventCallback<MouseEventArgs>`	Callback fired when the button is clicked.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.