Pulse Heart

Like button whose glyph collapses to a dot, flips colour and springs back past rest while the pill beats and the count rolls.

Default

Click to like and click again to take it back. With the keyboard the state changes without the run.

Customize

Count1204

Show Count

Icon

Idle Outline

Liked

Idle

Pill

Text

Size40px

Corner32px

Duration560ms

Dot Size0.3

Overshoot1.7

Beat3%

Roll350ms

Disabled

API Reference

PulseHeart

Prop	Type	Default	Description
`liked`	`boolean`	`undefined`	Controlled state, bound with v-model:liked. Changes from outside land without a run.
`defaultLiked`	`boolean`	`false`	Initial state when uncontrolled.
`count`	`number`	`0`	The number shown. A press adds or removes one and rolls one glyph per press. For a multi-digit odometer with places and decimals, use Counter.
`showCount`	`boolean`	`true`	Shows the count. Off collapses the pill to a circle.
`icon`	`'heart' \| 'star' \| 'thumb'`	`'heart'`	Built-in glyph. Use the icon slot for a custom element.
`idleOutline`	`boolean`	`true`	Draws the idle glyph as an outline. Off draws it as a muted solid.
`size`	`number`	`40`	Glyph size in pixels. Padding, gap and count size derive from it.
`corner`	`number`	`32`	Pill corner radius in pixels.
`likedColor`	`string`	`'#ff4d6d'`	Colour after the flip, and of the hover tint and focus ring.
`idleColor`	`string`	`'#8b8b93'`	Colour before the flip.
`pillColor`	`string`	`'#232326'`	Background of the pill that beats under the glyph.
`textColor`	`string`	`'#f5f5f5'`	Colour of the count.
`duration`	`number`	`560`	Length of the whole run in milliseconds. The flip is always at 40% of it.
`dotSize`	`number`	`0.3`	How small the glyph gets at the flip, as a fraction of its size.
`overshoot`	`number`	`1.7`	How far the glyph rebounds past rest on the way back. 0 lands without a rebound.
`beat`	`number`	`3`	Percent the pill dips at the flip.
`rollDuration`	`number`	`350`	How long the changed glyph of the count takes to roll, in milliseconds.
`disabled`	`boolean`	`false`	Dims the button and ignores input.
`label`	`string`	`'Like'`	Accessible name. The count is appended to it.

Event	Description
`change`	Emitted on every press with the new liked state and the new count.
`update:liked`	Emitted alongside change, for v-model:liked.

Slot	Description
`icon`	Custom glyph that replaces the built-in one. It inherits the colour through currentColor.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space` + `Enter`	Toggles the like. The state changes without the run.

Rendered as a button with aria-pressed. A visually hidden label announces the name and the count.
With prefers-reduced-motion the run is skipped and the count changes without rolling.

Prompt Bar Refine Frame