Trade Buttons

import { TradeButtons } from "@/components/sol/trade-buttons";

export function TradeButtonsDemo() {
  return <TradeButtons />;
}

Installation

pnpm dlx shadcn@latest add @solanaui/trade-buttons

npx shadcn@latest add @solanaui/trade-buttons

yarn dlx shadcn@latest add @solanaui/trade-buttons

Usage

<TradeButtons />

Controlled

Use value and onValueChange to control the selected side from a parent component.

const [side, setSide] = React.useState("long");

<TradeButtons value={side} onValueChange={setSide} />

{side === "long" ? <LongOrderForm /> : <ShortOrderForm />}

Custom Labels

The defaultValue always uses "long" or "short" regardless of the label text.

<TradeButtons labels={["Buy", "Sell"]} defaultValue="long" />

Source Code

"use client";

import React from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

interface TradeButtonsProps {
  defaultValue?: string;
  value?: string;
  onValueChange?: (value: string) => void;
  labels?: [string, string];
  className?: string;
}

const TradeButtons = ({
  defaultValue = "long",
  value,
  onValueChange,
  labels = ["Long", "Short"],
  className,
}: TradeButtonsProps) => {
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const currentValue = value ?? internalValue;

  const handleValueChange = (newValue: string) => {
    if (!newValue) return;
    setInternalValue(newValue);
    onValueChange?.(newValue);
  };

  return (
    <ToggleGroup
      type="single"
      variant="outline"
      spacing={2}
      value={currentValue}
      onValueChange={handleValueChange}
      className={cn("w-full", className)}
    >
      <ToggleGroupItem
        value="long"
        aria-label={`Toggle ${labels[0]}`}
        className={cn(
          "flex-1 shrink transition-colors",
          currentValue === "long"
            ? "bg-emerald-500/15 text-emerald-500 border-emerald-500/25 hover:bg-emerald-500/25 hover:text-emerald-500 data-[state=on]:bg-emerald-500/15 data-[state=on]:text-emerald-500"
            : "hover:bg-muted/80",
        )}
      >
        {labels[0]}
      </ToggleGroupItem>
      <ToggleGroupItem
        value="short"
        aria-label={`Toggle ${labels[1]}`}
        className={cn(
          "flex-1 shrink transition-colors",
          currentValue === "short"
            ? "bg-red-400/15 text-red-400 border-red-400/25 hover:bg-red-400/25 hover:text-red-400 data-[state=on]:bg-red-400/15 data-[state=on]:text-red-400"
            : "hover:bg-muted/80",
        )}
      >
        {labels[1]}
      </ToggleGroupItem>
    </ToggleGroup>
  );
};

export type { TradeButtonsProps };
export { TradeButtons };

"use client";import React from "react";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";import { cn } from "@/lib/utils";interface TradeButtonsProps {  defaultValue?: string;  value?: string;  onValueChange?: (value: string) => void;  labels?: [string, string];  className?: string;}const TradeButtons = ({  defaultValue = "long",  value,  onValueChange,  labels = ["Long", "Short"],  className,}: TradeButtonsProps) => {  const [internalValue, setInternalValue] = React.useState(defaultValue);  const currentValue = value ?? internalValue;  const handleValueChange = (newValue: string) => {    if (!newValue) return;    setInternalValue(newValue);    onValueChange?.(newValue);  };  return (    <ToggleGroup      type="single"      variant="outline"      spacing={2}      value={currentValue}      onValueChange={handleValueChange}      className={cn("w-full", className)}    >      <ToggleGroupItem        value="long"        aria-label={`Toggle ${labels[0]}`}        className={cn(          "flex-1 shrink transition-colors",          currentValue === "long"            ? "bg-emerald-500/15 text-emerald-500 border-emerald-500/25 hover:bg-emerald-500/25 hover:text-emerald-500 data-[state=on]:bg-emerald-500/15 data-[state=on]:text-emerald-500"            : "hover:bg-muted/80",        )}      >        {labels[0]}      </ToggleGroupItem>      <ToggleGroupItem        value="short"        aria-label={`Toggle ${labels[1]}`}        className={cn(          "flex-1 shrink transition-colors",          currentValue === "short"            ? "bg-red-400/15 text-red-400 border-red-400/25 hover:bg-red-400/25 hover:text-red-400 data-[state=on]:bg-red-400/15 data-[state=on]:text-red-400"            : "hover:bg-muted/80",        )}      >        {labels[1]}      </ToggleGroupItem>    </ToggleGroup>  );};export type { TradeButtonsProps };export { TradeButtons };

Installation

Usage

Controlled

Custom Labels

Source Code

On this page