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.

Accent with Icon

Combines an accent color with an Icon element.


Icon

Replaces or supplements text with an Icon element.


Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no border-radius.


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.

Enable dark mode for better visibility.


Static

Renders without motion wrappers or interactive animations.