Design SystemPatternsMarketOutcomeSelector

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