Enter
Buttons

FollowButton

A follow/following toggle. The badge first grows into the button's left cap, then sweeps right to fill it, carrying the new icon and label in behind its edge.

Disabled

Usage

<FollowButton
  size="md"
  intensity="normal"
  spring="smooth"
  label="Follow"
  activeLabel="Following"
/>

How the motion works

The fill is the button's own rounded rect clipped to a growing width, not a scaling circle, so its radius and height stay the button's at every frame. Stage one relaxes the badge's inset to zero until it fills the height; stage two sweeps that cap to the full width, starting just before the first lands so the pair reads as one gesture. The active face lives inside the clip, which is what makes the swap free — the plus slides right into the advancing edge and is cut off by it, the check slides in from outside the left edge, and the new word is uncovered in place over the old rather than cross-faded with it. Both stages are sub-ranges of a single progress spring, so releasing the toggle plays them back in reverse order. That spring runs at half the pace of whatever preset it is handed — stiffness scaled by the square of the figure, damping linearly, which is a change of time base rather than a slackening, so a slower toggle keeps the preset's character instead of turning loose. The icons get a second spring at the same damping constant but higher stiffness: it rings, and because the damping constant is what sets the decay envelope, it rings inside the same time the fill takes to settle rather than trailing after it. The fill has no such room — the button's edge is where the sweep has to stop, and a loose ratio there only sags the edge back off the corner a beat after it arrives — so its spring energy comes out as a volume-preserving stretch read off velocity, the button widening while the edge travels and back to its own width by the time it stops.

usePressuseSpringValue

Props

PropTypeDefaultDescription
followedbooleanControlled state.
defaultFollowedbooleanfalseInitial uncontrolled state.
onChange(followed: boolean) => voidFires when toggled.
labelstring"Follow"Text shown while inactive.
activeLabelstring"Following"Text shown once active.