Skip to content
All effectsButton

State Flip

Two states stacked in one slot; one slides out as the other slides in. The button never changes size.

Pure CSSButton

Usage

SubscribeSubscribed ✓

Meant for

ButtonToggleSegment

Examples

On a Button

Two states stacked in one slot; one slides out as the other slides in. Both buttons share one grid cell, so the control never changes size — the difference between this and swapping the label. Round the slot like the button (rounded-md) so the clip follows its corners.

The class is wm wm-state-flip — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.