Like Button `<mv-like>`

촉감이 느껴지는 누름 효과의 좋아요 또는 즐겨찾기 토글: 포인터 아래에서 글리프가 가라앉았다가 채워지면서 원래 크기 이상으로 튀어 오르고, 고리와 불꽃 왕관이 한 번 퍼져 나갑니다. 바뀐 카운터 자릿수는 고정된 자리에서 위나 아래로 굴러가며 Intl로 서식이 적용됩니다.

카테고리	마이크로 인터랙션
유형	Web Component (`<mv-like>`)
상태	안정
Keywords	like, heart, favorite, star, wishlist, upvote, toggle, burst, counter, social

When to use

Posts, comments or products need a like, favorite or upvote toggle with a live counter
A product grid or detail page needs a compact icon-only wishlist heart
A social feed wants expressive feedback when a user hearts or stars an item

Avoid when

Users should give a graded score rather than a binary like → use Rating instead
The toggle is a neutral setting such as bold or mute in a toolbar → use Toggle instead

설치

node scripts/add.mjs like-button --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["like-button"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/element.js, core/motion.js, components/like-button/like-button.js, components/like-button/like-button.css.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<div style="display:grid;gap:1.25rem;justify-items:center;width:100%;max-width:400px">
  <article style="width:100%;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface);box-shadow:var(--mv-shadow-md);overflow:hidden">
    <div style="aspect-ratio:16/8;position:relative;background:linear-gradient(160deg,oklch(0.86 0.07 200),oklch(0.66 0.11 230) 50%,oklch(0.36 0.09 260))">
      <svg viewBox="0 0 400 200" preserveAspectRatio="none" style="position:absolute;inset:0;width:100%;height:100%" aria-hidden="true"><circle cx="92" cy="62" r="26" fill="oklch(0.97 0.04 90 / .9)"/><path d="M0 150 70 96l52 30 88-74 76 62 58-30 56 36v80H0z" fill="oklch(0.42 0.08 250 / .6)"/><path d="M0 176 96 128l74 26 92-50 138 58v38H0z" fill="oklch(0.26 0.06 255 / .75)"/></svg>
    </div>
    <div style="padding:.9rem 1rem .5rem;display:grid;gap:.3rem">
      <strong style="font-size:.95rem">First light over Lofoten</strong>
      <span style="font-size:.8rem;color:var(--mv-fg-muted)">Photo by Ingrid Nilsen · Reine, Norway</span>
    </div>
    <footer style="display:flex;align-items:center;gap:.25rem;padding:0 .5rem .6rem">
      <mv-like id="mv-like-demo-heart" count="2381"></mv-like>
      <mv-like icon="star" count="64" pressed></mv-like>
      <span style="flex:1"></span>
      <mv-like data-variant="outline" count="999" label="Upvote"></mv-like>
    </footer>
  </article>
  <div style="display:flex;align-items:center;gap:.75rem">
    <mv-like label="Save to favorites"></mv-like>
    <mv-like icon="star" label="Star this repository" data-variant="outline"></mv-like>
    <mv-like data-size="lg" data-variant="outline" count="12" label="Like this recipe" pressed></mv-like>
    <mv-like count="7" disabled></mv-like>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`pressed`	boolean		Liked (reflected as aria-pressed on the inner button).
`count`	number		Displayed counter (omitted = icon-only button). Steps by one on each toggle and never goes below 0.
`label`	string	`Like (star: Favorite)`	Accessible name; the formatted counter is appended: “Like (2,381)”.
`icon`	heart \| star	`heart`	Glyph.
`locale`	BCP 47	`en-US`	Number formatting of the counter (Intl.NumberFormat).
`disabled`	boolean		Disables the button.
`data-variant`	outline		Outlined pill on a solid background.
`data-size`	lg		Larger.

Properties

Name	유형	Description
`strings`	Partial<{ like, favorite }>	Default accessible names for the heart and star when label is not set. English defaults.

Methods

Name	Description
`toggle(force?)`	Toggles like a click: plays the feedback, steps the counter, emits mv-change. Setting pressed or count directly updates silently.

Events

Name	Description
`mv-change`	After a toggle; detail = { pressed, count } (count is null without a counter).

CSS classes

Name	Description
`mv-like-button`	The generated `<button>` (data-icon-only without a counter); hosts may resize or restyle it.
`mv-like-icon / -glyph / -ring / -burst / -count`	Generated parts (all aria-hidden).

CSS variables

Name	Default	Description
`--mv-like-color`	`rose (star: gold)`	Liked color: fill, ring, long sparks and pressed tint.
`--mv-like-spark-color`	`amber (star: copper)`	Color of the short sparks.

Accessibility

A real toggle <button> with aria-pressed; its accessible name carries the formatted counter (Intl, en-US by default). The glyph, ring, sparks and visual counter are aria-hidden and ignore the pointer. Setting pressed or count programmatically updates the state without replaying the burst. Reduced motion: no press sink, pop, burst or digit roll, only the fill, color and number change. Forced colors: system colors (ButtonText, Highlight) draw the outline and the liked fill; the burst is hidden.