Selection
ViewToggle
Cycles through layout modes. The icon's bars slide and resize into their new arrangement instead of cross-fading.
Icon only
Disabled
Usage
<ViewToggle
size="md"
spring="smooth"
/>How the motion works
Every mode describes the same four rectangles as [x, y, width, height, opacity]. Rectangles a mode doesn't use are not removed — they are parked on top of a neighbour at zero opacity. Keeping array length and ordering identical across modes is what allows a plain numeric spring to morph between them; a mode with fewer bars would have nothing to interpolate against.
useMorphSwapLabelusePress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | "grid" | "column" | "list" | — | Controlled or initial mode. |
| onChange | (value: ViewMode) => void | — | Fires when the mode cycles. |
| modes | ViewMode[] | all three | Which modes to cycle through, in order. |
| labels | Partial<Record<ViewMode, string>> | — | Override the text per mode. |
| iconOnly | boolean | false | Hide the label. |