A pill that morphs its width between Follow, Following and Unfollow on hover, with a check that draws itself.
Maya Alvarez
@mayamakes / 12.4k followers
npx shadcn@latest add https://hyperblur.dev/r/follow-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/follow-button.tsx.
import { FollowButton } from "@/components/hyperblur/follow-button"
<FollowButton onFollowChange={(following) => console.log(following)} />| Prop | Type | Default | Description |
|---|---|---|---|
| following | boolean | Controlled state. Pair with onFollowChange. | |
| defaultFollowing | boolean | false | Initial state when uncontrolled. |
| onFollowChange | (following: boolean) => void | Called on every toggle with the new state. | |
| labels | { follow?: string; following?: string; unfollow?: string } | { "Follow", "Following", "Unfollow" } | Text for each state. The width always fits the longest visible label. |
| accent | string | "#2f7bff" | Focus ring and check color. |
| disabled | boolean | false | Disables the button. All other button attributes are forwarded. |