Build · New

Trade Action

Buy and Sell side by side, for trading and brokerage screens. Both are primary actions: green Buy at the inline start, red Sell after it, and the colors never swap in Arabic.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/trade-action

Dependencies it brings: @base-ui/react

Usage

import { TradeAction } from "@/components/ui/trade-action";

<TradeAction buyLabel="Buy" sellLabel="Sell" onBuy={openBuy} onSell={openSell} />

Examples

Sizes

lg 56, md 48, sm 40 and xs 32px. Both halves are always the same width, and the tap target stays at least 48px.

Disabled

disabled switches off both halves, for example when the market is closed. Say why next to them: a disabled control can't explain itself.

API reference

TradeAction

Prop	Type	Default	Description
`buyLabel`	`ReactNode`		Buy label: the Buy text, which can carry the price (“Buy 38.45”).
`sellLabel`	`ReactNode`		Sell label: the Sell text.
`onBuy`	`(event) => void`		Called when Buy is pressed.
`onSell`	`(event) => void`		Called when Sell is pressed.
`size`	`"lg" \| "md" \| "sm" \| "xs"`	`"lg"`	Figma's Size.
`disabled`	`boolean`	`false`	State = Disabled on both halves.
`className`	`string`		Classes for the group, such as `w-full` to fill the width.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves from Buy to Sell; focus shows the ring without changing the color.
`EnterSpace`	Runs the focused action.

ARIA

Two native buttons in a role="group"; the name is the text, so meaning never depends on color alone.
Buy and Sell usually open a confirmation form; don't execute a financial order on a single press without a review.

Arabic and RTL notes

Mirrors

Buy sits at the inline start (the right in Arabic) and Sell after it, so the reading order stays Buy, then Sell.

Does not mirror

Colors never swap: Buy is green and Sell red in both languages.

Numerals: Prices in the labels are formatted with formatNumber and follow the numerals setting; try ١٢٣ in the preview.
Arabic typography: body-16 (body-14 at xs) in Semibold, at a fixed height that fits Arabic.
Mixed-direction text: A price after Arabic text (“شراء 38.45”) renders correctly; a Latin ticker inside it (“شراء AAPL”) goes in <bdi>.

All components ›