Toggle

A two-state button that can be either on or off.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Toggle />

Activate or deactivate a formatting option such as Bold, Italic, or Underline in a toolbar.
Represent a binary on/off state that is clearly visible as a pressed/unpressed button.
Provide icon-only controls in compact toolbars where a Switch would be too wide.
Combine into a ToggleGroup for mutually exclusive selections like text alignment.

Default

Variants

Sizes

With Text

Disabled

Variant — interactive preview

Switch between variants to see the visual difference live.

Pressed: False

Size — interactive preview

Pick a size to see the toggle scale live.

Icon + Text slots — interactive preview

Show icon

Show text

Pressed: False

Toggle the icon and text slots independently to compose your toggle content.

Key	Action
`Space`	Toggles the pressed state.
`Enter`	Activates the toggle.
`Tab`	Moves focus to the next focusable element.

Property	Type	Default	Description
Pressed	bool	false	Whether the toggle is in a pressed/active state. Use with @bind-Pressed for two-way binding.
PressedChanged	EventCallback<bool>	—	Callback invoked when the pressed state changes.
Variant	ToggleVariant	Default	Visual style. Values: Default, Outline.
Size	ToggleSize	Default	Size of the toggle button. Values: Default, Sm, Lg.
Disabled	bool	false	When true, prevents interaction and dims the toggle.
ChildContent	RenderFragment?	null	Content rendered inside the toggle button (icon, text, or both).
AriaLabel	string?	null	Accessible label announced by screen readers for icon-only toggles.