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.
Usage
@using Lumeo <Toggle />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
30 tests across 4 files. Auto-generated from the test suite.
When to Use
- 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.
Switch between variants to see the visual difference live.
Pressed: False
Pick a size to see the toggle scale live.
Show icon
Show text
Pressed: False
Toggle the icon and text slots independently to compose your toggle content.
Keyboard Interactions
| Key | Action |
|---|---|
| Space | Toggles the pressed state. |
| Enter | Activates the toggle. |
| Tab | Moves focus to the next focusable element. |
API Reference
Toggle
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The toggle's content (label text and/or icon). |
| Pressed | bool | false | Whether the toggle is pressed (on). Two-way bindable via PressedChanged. |
| Variant | ToggleVariant | ToggleVariant.Default | Visual style: Default (borderless) or Outline (bordered). |
| Size | Lumeo.Size | Lumeo.Size.Md | Controls the toggle's height and horizontal padding. Supports all 7 Size values (Xxs–Xxl). Note: Xxs falls under the 24px touch-target minimum at Compact and even Spacious density. Default Md. |
| Density | Density? | — | Per-toggle density override. When null, inherits from any ancestor DensityScope; if neither is set, the toggle sits on the Comfortable rung — which is where shadcn's own default sits as of 5.0, one step below the pre-5.0 Lumeo default. Only height + horizontal padding shift — text size + radius stay governed by Size. |
| Disabled | bool | false | Disables the toggle, preventing clicks and dimming its appearance. |
| AriaLabel | string? | — | Accessible name exposed via aria-label. Required when ChildContent is an icon only (no visible text) — otherwise screen readers announce the toggle as an unnamed button. |
| Class | string? | — | Additional CSS classes merged onto the <button> element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the <button> element. |
Events
| PressedChanged | EventCallback<bool> | Raised when the toggle is clicked and its pressed state flips. |
Styling hooks (data-state)
A toggle exposes a data-state
of on or
off plus
data-disabled when disabled, so pressed
styling can be driven from CSS (e.g. data-[state=on]:bg-accent)
instead of conditional classes.
Related Components
- ToggleGroup — A set of toggles for selecting one or more formatting options.
- Button — Use when the action is one-shot rather than a persistent on/off state.
- Switch — A toggle for settings panels where the on/off metaphor is clearer.
- Checkbox — Use for multi-select form fields or items inside a list.