OutcomeSelector
Reference照 app.opinion.trade 線上產品重建的對照版,用來量測與討論。不是 production 的程式碼。
Installation
import { OutcomeSelector } from "@/components/product/outcome-selector/outcome-selector";Overview
OutcomeSelector is a Layer-2 product component: layout + grouping of a pair of OutcomeAction buttons. It supports a horizontal or vertical pair layout, a size that propagates to both actions, and a whole-group disabled state. Re-clicking the currently selected outcome clears the selection. It also supports a "filter" emphasis for secondary/navigation use (distinct from its default decision/ transactional emphasis). TradePanel consumes OutcomeSelector; OutcomeSelector itself MUST NOT render amount, CTA, or slippage — that composition lives one layer up in TradePanel.
Interactive Demo
Selected: yes
State Matrix
Emphasis — decision (primary transactional)
sm / YES selected
lg / NO selected
lg / vertical / none
lg / disabled
Emphasis — filter (secondary navigation)
YES selected
NO selected
none selected