Buttons
SquishButton
The library's base button. Press it and the surface compresses into the page, then springs back past its rest size before settling.
Circle
Magnetic
Disabled
Usage
<SquishButton
variant="solid"
size="md"
intensity="normal"
spring="smooth"
extrude={4}
>
Press me
</SquishButton>How the motion works
Compression is volume-preserving: the Y axis squashes while X widens at a softened ratio, which is what reads as a squash rather than the element scaling away from the viewer. The extruded bottom edge is a hard shadow that shortens by the same amount the surface sinks, so the key's total silhouette height stays constant while held. Release runs on an under-damped spring, producing the overshoot.
usePressuseMagneticuseSpringValue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "soft" | "outline" | "ghost" | "danger" | "solid" | Visual treatment. |
| size | "sm" | "md" | "lg" | "md" | Control height and typography scale. |
| intensity | "subtle" | "normal" | "strong" | "normal" | Scales how far the surface squashes. |
| spring | SpringLike | "bouncy" | Release spring preset or explicit config. |
| circle | boolean | false | Renders as a 1:1 circle. |
| magnetic | boolean | false | Pulls toward the cursor while nearby. |
| extrude | number | 4 | Height of the extruded bottom edge in px. 0 is flat. |
| radius | string | — | Overrides the token radius with any CSS length. |
| startIcon / endIcon | ReactNode | — | Content rendered before or after the children. |