TickerTape
StableA looping strip of symbols, prices and changes, with a visible Pause button.
Also known as marquee, stock ticker, scrolling ticker
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Default
- RELIANCE2,874.15Up +₹32.50 (+1.14%)
- TCS3,921.60Down −₹18.40 (−0.47%)
- INFY1,544.00Unchanged ₹0.00 (0.00%)
- HDFCBANK1,688.90Up +₹12.25 (+0.73%)
- ITC462.30Down −₹3.10 (−0.67%)
<TickerTape label="Market ticker" items={ITEMS} />Scrolls at 40 pixels per second. Hover it or tab into it to stop it.
When to use it
Gives a glanceable stream of many prices in a small space, while keeping control with the person.
Made of: Region · Item: symbol, price, change · Second copy (hidden) · Pause or Play button
Do and avoid
- RELIANCE2,945.50Up +₹12.40 (+0.42%)
- TCS4,120.00Down −₹18.20 (−0.44%)
- INFY1,880.30Up +₹6.10 (+0.33%)
Do
- Keep the Pause button visible.
- Use a list of unique symbols.
- Keep the same data available in a still view.
Avoid
- Do not remove the button to save space.
- Do not use it as the only place a price appears.
- Do not set a very high speed.
On a phone
- The strip scrolls by itself and fills the width, with the Pause button fixed at the right edge. The button is 44px on touch screens and shows only its icon below 640px.
- Moving the strip by touch does not pause it, because pausing is tied to a mouse pointer or keyboard focus. Tap the Pause button instead.
- With reduced motion on, the strip stops and can be swiped sideways by hand.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { symbol: string; price: number; change: number; percent: number }[] | none | The items to show, in order. Symbols should be unique. |
| labelrequired | string | none | Accessible name of the region, such as Market ticker. |
| speed | number | 40 | Scroll speed in pixels per second. |
| paused | boolean | none | Controlled pause state. Leave out and the strip manages it. |
| onPausedChange | (paused: boolean) => void | none | Called when the Pause or Play button is pressed. |
| className | string | none | Classes for the region. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one TickerTape switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Paused | paused | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- paused
- Pass paused, or press the button. The strip stops and the button reads Play ticker.
- hover
- The strip stops while the pointer is over it.
- focus
- The strip stops while focus is inside it. The button shows a visible focus ring.
- reduced motion
- The strip does not move. It is one row you can scroll sideways, with no second copy.
- empty
- With no items the strip stays still and shows only the button.
Tokens
Change one of these and every part that uses it follows.
--surface--line--hover--fg--fg-muted--up-fg--down-fg--dur-fast--radius-card
Built in
- It is a region named by label.
- A real button reads Pause ticker or Play ticker.
- It stops while hovered or while focus is inside it.
- With reduced motion it does not move and can be scrolled sideways.
- The second copy is hidden from screen readers and cannot take focus.
- Each change is read as Up, Down or Unchanged, with the numbers.
What you need to do
- Give it a label such as Market ticker.
- Do not hide the Pause button or put important information only in the strip.
- Offer the same prices somewhere that does not move.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide