Like Button

A heart button that pops with a particle burst and rolling count.

@spectrumui/like-button

Tap a heart — spring pop, ring pulse, particle burst and a rolling count

Installation

Login to view commandCreate a free account to access the install command

Usage

import { LikeButton } from "@/components/spectrumui/like-button"
<LikeButton count={128} onLikedChange={(liked) => console.log(liked)} />

API Reference

LikeButton

Renders a single button element with aria-pressed reflecting the liked state. Pass liked to control it from outside, or defaultLiked to let it manage its own state.

PropTypeDefaultDescription
likedboolean-Controlled liked state. Leave undefined for uncontrolled usage
defaultLikedbooleanfalseInitial liked state when uncontrolled
onLikedChange(liked: boolean) => void-Fires with the next liked state on every toggle
countnumber-Like total excluding the current user; +1 is shown while liked. Totals of 1000+ are compacted (1.2K)
showCountbooleantrueHide the rolling counter even when count is set
size"sm" | "md" | "lg""md"Visual size of the button
particleColorsstring[]-Colors cycled across the burst particles
labelstring"Like"Accessible name of the action
disabledbooleanfalseDisables pointer and keyboard interaction
classNamestring-Additional classes merged with the default button styles

Examples

Sizes