# Like Button

Heart toggle for social feeds that fills from the bottom up with a soft glow and updates the count in place. It fills however the post gets liked, including a double-tap on the photo.

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

## Install

```bash
npx @lumioui/cli add like-button
```

## Import

```tsx
import { formatLikeCount, LikeButton } from "@/components/ui/like-button/like-button";
```

## Variants

- `feed` — Photo post: `npx @lumioui/cli add like-button-feed`
- `reels` — Video overlay: `npx @lumioui/cli add like-button-reels`
- `tracks` — Tracklist: `npx @lumioui/cli add like-button-tracks`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `liked?` | `boolean` | Controlled liked state. Omit and use `defaultLiked` for uncontrolled. |
| `defaultLiked?` | `boolean` | Uncontrolled initial state. Default false. |
| `onLikedChange?` | `(liked: boolean) => void` | Fires with the next state on every tap. |
| `count?` | `number` | Likes from everyone else. The viewer's own like is added on top, so  toggling never needs the parent to recompute the total. Omit to hide the count. |
| `formatCount?` | `(n: number) => string` | Count formatter. Default `formatLikeCount` (1,284 · 12.4K · 1.2M). |
| `hideCount?` | `boolean` | Hide the count even when `count` is set. |
| `variant?` | `"plain" | "pill" | "overlay"` | plain — icon + inline count (feeds). pill — bordered chip (comments,  reactions). overlay — white stacked icon over video/photo (reels). |
| `size?` | `"sm" | "md" | "lg"` | Glyph + count scale. Default "md". |
| `color?` | `keyof ColorTokens | (string & {})` | Liked fill colour: a theme token ("primary", "destructive"…) or any  colour. Default the social red. |
| `noBurst?` | `boolean` | Skip the light pool under the heart — for dense rows (comments, lists).  The rising fill and the count swap stay. |
| `haptic?` | `boolean` | Haptic on like. Default true. |
| `disabled?` | `boolean` | — |
| `accessibilityLabel?` | `string` | Screen-reader name. Default "Like". |
| `className?` | `string` | — |
| `countClassName?` | `string` | Extra classes for the count text. |

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