Switch

Toggle between 2 states.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.


Disabled

Prevents interaction with reduced visual emphasis.


Icon Examples

Icon-only buttons and decorative configurations.

Icon

Replaces or supplements text with an Icon element.


Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no br-(value).


Squircle

Applies a smooth continuous curve between adjacent corners.


More Examples

Additional variants and interactive states.

Accent

Applies a distinct accent color to the component.


Description

Includes a secondary descriptive text below the label.


Static

Renders without motion wrappers or interactive animations.