## Follow Button (S—079)

Follow becomes Following with a width-morph and tick; hovering a followed state previews Unfollow.

- URL: https://sundaeui.dev/components/follow-button
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/follow-button.json`
- Tags: follow, subscribe, social, toggle, button

The button morphs its width between labels instead of snapping, and the plus turns into a tick. When followed, hovering or focusing swaps the label to Unfollow so the next click is never a surprise.
An optional follower count rolls by one in step with the state.

### Usage

```tsx
import { FollowButton } from '@/components/sundae/follow-button'

<FollowButton />
```

### Props

- `following / defaultFollowing` (`boolean`, default `false`): State.
- `count` (`number`): Optional follower count shown beside it.
- `onFollowChange` (`(on: boolean) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Profiles, creators, channels, topics.

### When not to use

- Actions with side effects beyond a subscription.

### Accessibility

- A toggle button with aria-pressed; the label always describes the current state.
- The hover-to-unfollow label also appears on keyboard focus.
- Reduced motion removes the movement and keeps every state change.