Loading…

Like Button

beta

A heart toggle with a rolling count: liking pops the heart with a ring burst and radiating dots, unliking deflates quietly.

Feedback
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs number-flow as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add like-button

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { LikeButton } from "@/components/ui/like-button";

Examples

Every example the tests run, live and operable, side by side.

Default
Glyphs
Sizes
Compact Count
Icon Only
Controlled

API

Generated from the component's own types, so a prop cannot appear here without existing.

<LikeButton>

Prop	Type	Default
`count` The total, as your data has it. Uncontrolled, it is the total at `defaultLiked`, and the viewer's own like is added or removed as the button toggles. Controlled, it is shown as given — update it with `liked`.	`number`	—
`defaultLiked` Initial state when uncontrolled.	`boolean`	`false`
`format` Intl.NumberFormat options for the count, e.g. `{ notation: "compact" }` for "1.2K".	`Intl.NumberFormatOptions`	—
`icon` The glyph. Defaults to a heart; any stroked icon (a star, a bookmark) fills the same way.	`ReactNode`	—
`label` The accessible name, before the count: "Like, 128".	`string`	`"Like"`
`liked` Controlled state. When set, `count` is shown exactly as given.	`boolean`	—
`onLikedChange`	`(liked: boolean) => void`	—
`showCount` Show the count beside the icon. Hidden when there is no `count`.	`boolean`	`true`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`tone`	`"destructive" \| "primary" \| "warning" \| "success" \| "foreground"`	`"destructive"`

Plus every attribute of <button> except children, iconOnly.

Accessibility

A toggle button exposed with aria-pressed and named "Like, 128" — the count is part of the name, since the rolling digits are aria-hidden. Changes are not announced beyond the pressed state a screen reader already reports. The icon, ring and dots are decorative. Nothing animates on first paint, and under reduced motion every keyframe snaps to its resting frame. Colour is never the only signal: the heart also fills.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

count

The total, as your data has it. Uncontrolled, it is the total at defaultLiked, and the viewer's own like is added or removed as the button toggles. Controlled, it is shown as given — update it with liked.

number

—

defaultLiked

Initial state when uncontrolled.

boolean

false

format

Intl.NumberFormat options for the count, e.g. { notation: "compact" } for "1.2K".

Intl.NumberFormatOptions

—

icon

The glyph. Defaults to a heart; any stroked icon (a star, a bookmark) fills the same way.

ReactNode

—

label

The accessible name, before the count: "Like, 128".

string

"Like"

liked

Controlled state. When set, count is shown exactly as given.

boolean

—

onLikedChange

(liked: boolean) => void

—

showCount

Show the count beside the icon. Hidden when there is no count.

boolean

true

size

"sm" | "md" | "lg"

"md"

tone

"destructive" | "primary" | "warning" | "success" | "foreground"

"destructive"