Toggle Button

Preview

About

A button with an on/off state (selected), used for filters, formatting, or persistent settings. For an isolated binary setting, use KasySwitch; for a momentary action, use KasyButton.

• label and/or icon: the button's content (at least one of the two is required); prefixIcon/suffixIcon pair with label.
• selected / onChanged: current state and callback; passing onChanged: null disables the button.
• variant: filled (neutral fill at rest, default) or ghost (transparent at rest, fills only on hover/selected).
• size: sm (32), md (36, default), or lg (40) height.
• borderRadius: overrides the default pill shape — used internally by KasyToggleButtonGroup for straight-edged cells.
• semanticLabel: alternative accessibility label to label.

Selected uses a soft fill of the primary color (primarySoft); disabled drops to 50% opacity.

Last updated on 08/23/2026