This element was developed exclusively for the TEVA rebrand initiative.

It is not intended for general use in other projects.
Please do not use this component outside of the TEVA context.

Overview

The Ticker Button element 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 as a native web component.

API Reference

vision-format-ticker-button

A web 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
price-label: string - Accessible label for the price (used in collapsed mode)
expanded: "true" | "false" - Controls layout mode (default: "true")

Basic Usage

Use the ticker button element to display financial ticker information. The component automatically formats the data based on the expanded attribute.

Expanded Layout

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

<vision-button family="link" variant="default">
	<vision-format-ticker-button
		exchange="NYSE"
		ticker="TEVA"
		price="27.21"
		price-label="Price"
		expanded="true">
	</vision-format-ticker-button>
</vision-button>

Collapsed Layout

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

<vision-button family="link" variant="default">
	<vision-format-ticker-button
		exchange="NYSE"
		ticker="TEVA"
		price="27.21"
		price-label="Price"
		expanded="false">
	</vision-format-ticker-button>
</vision-button>

Different Exchanges

The element works with various stock exchanges and ticker symbols.

<div class="grid grid-cols-2 gap-4">
	<vision-button family="link" variant="default">
		<vision-format-ticker-button
			exchange="NASDAQ"
			ticker="AAPL"
			price="174.50"
			price-label="Price"
			expanded="true">
		</vision-format-ticker-button>
	</vision-button>
	<vision-button family="link" variant="default">
		<vision-format-ticker-button
			exchange="NASDAQ"
			ticker="AAPL"
			price="174.50"
			price-label="Price"
			expanded="false">
		</vision-format-ticker-button>
	</vision-button>
</div>