Ticker Button

Overview

The Ticker Button component provides a formatted display for financial ticker data with two layout modes: expanded and collapsed. It presents exchange, ticker symbol, and price information in an accessible and space-efficient manner.

API Reference

TickerButton

A format component that displays financial ticker information with responsive layout options.

• exchange: string - The stock exchange name (e.g., "NYSE", "NASDAQ")
• ticker: string - The ticker symbol (e.g., "TEVA", "AAPL")
• price: string - The current price value
• priceLabel: string - Accessible label for the price (used in collapsed mode)
• expanded: boolean - Controls layout mode (default: true)

Basic Usage

Use TickerButton to display financial ticker information. The component automatically formats the data based on the expanded state.

Expanded Layout

The expanded layout displays all information in a single line format: "Exchange: Ticker $Price".

<Button family="link" variant="default">
	<TickerButton
		exchange="NYSE"
		ticker="TEVA"
		price="$27.21"
		priceLabel="Price"
		expanded={true}
	/>
</Button>

Collapsed Layout

The collapsed layout uses a compact two-column format with exchange/ticker stacked vertically and price displayed prominently.

<Button family="link" variant="default">
	<TickerButton
		exchange="NYSE"
		ticker="TEVA"
		price="$27.21"
		priceLabel="Price"
		expanded={false}
	/>
</Button>

Different Exchanges

The component works with various stock exchanges and ticker symbols.

<div class="grid grid-cols-2 gap-4">
	<Button family="link" variant="default">
		<TickerButton
			exchange="NASDAQ"
			ticker="AAPL"
			price="$174.50"
			priceLabel="Price"
			expanded={true}
		/>
	</Button>
	<Button family="link" variant="default">
		<TickerButton
			exchange="NASDAQ"
			ticker="AAPL"
			price="$174.50"
			priceLabel="Price"
			expanded={false}
		/>
	</Button>
</div>