# Follow Button

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.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/follow-button
```

## Import

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

## Variants

- `members` — Member list: `npx @lumioui/cli add pro/follow-button-members`
- `profile` — Profile header: `npx @lumioui/cli add pro/follow-button-profile`
- `suggestions` — Suggested for you: `npx @lumioui/cli add pro/follow-button-suggestions`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `following?` | `boolean` | Controlled follow state. Omit and use `defaultFollowing` for uncontrolled. |
| `defaultFollowing?` | `boolean` | Uncontrolled initial state. Default false. |
| `onFollowingChange?` | `((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. |
| `followsYou?` | `boolean` | They already follow the viewer — idle label becomes "Follow back". |
| `confirmUnfollow?` | `boolean` | Two-step unfollow: first tap arms a red "Unfollow", second confirms.  Default true. Ignored when `onUnfollowRequest` is set. |
| `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". |
| `size?` | `"sm" | "md" | "lg"` | Height preset: sm 32 · md 36 · lg 44. Default "md". |
| `showIcon?` | `boolean` | Leading glyph (person-plus / check). Default false. |
| `fullWidth?` | `boolean` | Stretch to the parent instead of morphing width (profile headers,  suggestion cards). |
| `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. |
| `className?` | `string` | — |

## Icons rendered

- `user-plus` — /icons.html?i=user-plus
- `check` — /icons.html?i=check
- `clock` — /icons.html?i=clock
- `x` — /icons.html?i=x

Source: https://lumioui.com/components/follow-button