# Like button

> Heart toggle that bursts into particles and rolls its count.

Component · Pro · https://lodeui.com/components/like-button

## When to use

- Likes, favorites and reactions on posts, comments and products.

## When not to use

- Settings: use a switch.

## Installation

```bash
npx shadcn@latest add @lode/like-button
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { LikeButton } from "@/components/ui/like-button";

export function PostActions({ post }: { post: Post }) {
  return <LikeButton count={post.likes} defaultLiked={post.likedByMe} onLikedChange={(liked) => setLike(post.id, liked)} label="Like this post" />;
}
```

## API reference

### LikeButton

A toggle button with a heart, a particle burst and an optional rolling count.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| liked / defaultLiked / onLikedChange | `boolean` | – | Controlled or uncontrolled state. |
| count | `number` | – | Total likes. Uncontrolled, it adjusts by one as you toggle. |
| label | `string` | `"Like"` | What is being liked; the count is appended for screen readers. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height and icon size. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Toggle |

## Accessibility

- A button with aria-pressed, named with what is liked and the count.
- Color is backed by a filled heart.

## Motion

- The heart springs in from 20%; a ring and ten particles burst outward (600ms).
- The count rolls up or down.
- No burst under reduced motion.

## Responsive behavior

- Inline; three sizes for dense lists and hero actions.

## Performance

- Particles exist only during the burst.

## Notes for AI

- When controlled, pass the already-updated count yourself.

## Related

- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.
- [Confetti](https://lodeui.com/components/confetti) — Fire a confetti burst from any point, or use the button that bursts from itself.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.