Toggle
A two-state button that can be switched on or off, ideal for enabling or disabling formatting options, features, or modes in toolbars and settings panels.
Default
The default toggle uses a transparent background that switches to
accent when pressed. Bind the pressed state with @bind-Pressed for two-way data binding, or use DefaultPressed for uncontrolled mode.Variants
Use the
Variant parameter to change the visual style. Default has a flat background, while Outline adds a visible border that makes the toggle stand out in layouts where the background is already muted.With Text
Combine an icon with descriptive text for toggles that need a clear label. Add spacing between the icon and text with
mr-2. This pattern works well in settings panels where the user needs to understand what the toggle controls.Sizes
Control the toggle dimensions with the
Size parameter. Available sizes are Small (compact toolbars), Default (standard use), and Large (touch-friendly interfaces). Adjust the icon size to match — h-3 w-3 for small, h-4 w-4 for default, and h-5 w-5 for large.Disabled
Set
Disabled to true to prevent user interaction. Disabled toggles have reduced opacity and do not fire the PressedChanged event, making them suitable for features that are temporarily unavailable.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific styling. Override the pressed state appearance with data-[state=on]: modifiers for gradients, custom colours, or unique shapes.Text Formatting Toolbar
A real-world pattern showing multiple toggles in a toolbar for text formatting. Each toggle independently tracks its own pressed state, letting users combine bold, italic, underline, and strikethrough in any combination.