Design SystemPatternsMarketWatchlistButton

WatchlistButton

Reference照 app.opinion.trade 線上產品重建的對照版,用來量測與討論。不是 production 的程式碼。

Installation

import { WatchlistButton } from "@/components/product/watchlist-button/watchlist-button";

Overview

Shared affordance for "save to watchlist" across product surfaces (MarketCard, MarketHeader, any future market-saving context). Previously inlined per-consumer — now centralized so hover / pressed / focus treatment stays consistent everywhere it is used. Ships in two visual variants: a default standalone form, and an "overlay" form meant for placement on top of an image thumbnail.

Interactive Demo

Default (on a card surface)

Save this market

Overlay (on an image thumbnail)

Variant × State

Static state matrix

default / unfavorited

default / favorited

overlay / unfavorited

overlay / favorited