Follow Button

A follow button that morphs its width, fill, and label between states.

@spectrumui/follow-button

Arihant Jain

@arihantcodes

2,847followers

Installation

Usage

import { FollowButton } from "@/components/spectrumui/follow-button"

<FollowButton onFollowingChange={(following) => console.log(following)} />

API Reference

FollowButton

Renders a single button element with aria-pressed reflecting the following state. Pass following to control it from outside, or defaultFollowing to let it manage its own state.

Prop	Type	Default	Description
`following`	`boolean`	-	Controlled following state. Leave undefined for uncontrolled usage
`defaultFollowing`	`boolean`	`false`	Initial following state when uncontrolled
`onFollowingChange`	`(following: boolean) => void`	-	Fires with the next following state on every toggle
`followLabel`	`string`	`"Follow"`	Label of the idle call-to-action pill
`followingLabel`	`string`	`"Following"`	Label shown while followed
`unfollowLabel`	`string`	`"Unfollow"`	Label revealed on hover or focus while followed
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the button
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction
`className`	`string`	-	Additional classes merged with the default button styles

Follow Button

Installation

Usage

API Reference

FollowButton

Examples

Sizes and custom labels