Follow Button

Pro

Follow button that confirms with a check, then reshapes into a quieter Following state. Unfollowing takes two taps, and it handles requested, follow-back and failed follows gracefully.

Preview

Installation

npx @lumioui/cli add pro/follow-button

Usage

import { FOLLOW_SETTLE_MS, FollowButton } from "@/components/ui/follow-button/follow-button";
<FollowButton />

Also exported: FOLLOW_SETTLE_MS.

Examples

Member list

A run club member list.

Profile header

A creator profile header.

Suggested for you

"Suggested for you" cards in a film-photography app, coral accent.

API reference

Prop Type Default
following boolean

Controlled follow state. Omit and use defaultFollowing for uncontrolled.

 —
defaultFollowing boolean

Uncontrolled initial state. Default false.

 false
onFollowingChange
((following: boolean) => void) … ((following: boolean) => void) | ((following: boolean) => Promise<unknown>)

Fires with the next state. Return a Promise to make it optimistic: a rejection rolls the button back (uncontrolled) and shakes it.

 —
privateAccount boolean

Private account — following shows "Requested" until approved.

 false
followsYou boolean

They already follow the viewer — idle label becomes "Follow back".

 false
confirmUnfollow boolean

Two-step unfollow: first tap arms a red "Unfollow", second confirms. Default true. Ignored when onUnfollowRequest is set.

 true
onUnfollowRequest () => void

Take over the unfollow confirmation (e.g. open an ActionSheet). Called instead of unfollowing; the parent sets following false itself.

 —
labels Partial<FollowButtonLabels>

Override any label.

 —
variant "solid" | "outline"

solid — ink "Follow" (social feeds). outline — bordered "Follow" for dense lists where a column of ink pills is too loud. Default "solid".

 "solid"
size "sm" | "md" | "lg"

Height preset: sm 32 · md 36 · lg 44. Default "md".

 "md"
showIcon boolean

Leading glyph (person-plus / check). Default false.

 false
fullWidth boolean

Stretch to the parent instead of morphing width (profile headers, suggestion cards).

 false
disabled boolean —
name string

Who is being followed — folded into the screen-reader label ("Follow Noor Haddad").

 —
commitMoment boolean

Play the follow moment (lit hold, sheen, drawn check) before resolving to the quiet "Following". Default true; false resolves at once.

 true
className string —