---
title: Ticker
description: Compact label + value + delta widget for dashboards
visibility: guest
draft: false
---

# Ticker

A compact metric display for dashboards and analytics. Shows a label, value, and optional delta change indicator with auto-derived intent coloring.

## Basic Usage

:::preview{title="Plain ticker"}
<x-wirekit::ticker label="MRR" value="$12,400" />
:::

## With Delta

The component auto-derives intent from the delta sign: positive = success (green), negative = danger (red), zero = neutral:

:::preview{title="Ticker with delta"}
<x-wirekit::row gap="lg" wrap>
    <x-wirekit::ticker label="Revenue" value="$31,200" :delta="12" />
    <x-wirekit::ticker label="Churn" value="3.2%" :delta="-5" />
    <x-wirekit::ticker label="CAC" value="$120" :delta="0" />
</x-wirekit::row>
:::

## Absolute Delta Format

Show raw numbers instead of percentages:

:::preview{title="Absolute delta format"}
<x-wirekit::ticker label="Orders" value="340" :delta="25" delta-format="absolute" />
:::

## Intent Override

Override the auto-derived color for metrics where "up" is bad:

:::preview{title="Intent override — up is bad"}
<x-wirekit::row gap="lg" wrap>
    <x-wirekit::ticker label="Error Rate" value="2.1%" :delta="5" intent="danger" />
    <x-wirekit::ticker label="Bounce Rate" value="34%" :delta="-8" intent="success" />
</x-wirekit::row>
:::

## Size Variants

:::preview{title="All size variants"}
<x-wirekit::row gap="lg" wrap>
    <x-wirekit::ticker label="Small" value="$1,200" :delta="5" size="sm" />
    <x-wirekit::ticker label="Medium" value="$1,200" :delta="5" size="md" />
    <x-wirekit::ticker label="Large" value="$1,200" :delta="5" size="lg" />
</x-wirekit::row>
:::

## Footer Slot

Add context text below the value:

:::preview{title="Ticker with footer"}
<x-wirekit::ticker label="MRR" value="$12,400" :delta="8">
    <x-slot:footer>vs last month</x-slot:footer>
</x-wirekit::ticker>
:::

## Dashboard Grid

:::preview{title="Ticker dashboard row"}
<x-wirekit::grid cols="1 sm:2 lg:4" gap="md">
    <x-wirekit::ticker label="Revenue" value="$31.2k" :delta="12" />
    <x-wirekit::ticker label="Users" value="1,240" :delta="8" />
    <x-wirekit::ticker label="Churn" value="2.4%" :delta="-3" intent="success" />
    <x-wirekit::ticker label="NPS" value="62" :delta="0" />
</x-wirekit::grid>
:::

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `null` | Metric label |
| `value` | `string` | `null` | Formatted value to display |
| `delta` | `int\|float` | `null` | Change value |
| `delta-format` | `string` | `'percent'` | Delta format: `percent` or `absolute` |
| `intent` | `string` | `null` | Override auto-derived intent: `success`, `danger`, `neutral` |
| `size` | `string` | `'md'` | Size variant: `sm`, `md`, `lg` |

## Slots

| Slot | Description |
|------|-------------|
| `footer` | Context text below the value |

## Accessibility

- `<article>` root with `aria-labelledby` linking to the label
- Delta carries `aria-label` describing direction and magnitude (e.g. "Change: up 12 percent")
- Tabular-nums font variant for aligned digit columns

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Pitfalls

- **Don't auto-refresh ticker rows on a sub-second interval.** WCAG 2.2.2 — and screen readers announce every change as `aria-live="polite"` updates fire.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--font-wk-sans` | Ticker font family |
| `--font-wk-body-weight` / `--font-wk-heading-weight` | Label / value font weight |
| `--text-wk-xs` / `--text-wk-sm` / `--text-wk-lg` / `--text-wk-xl` | Font size per `size` prop |
| `--color-wk-text` | Value text |
| `--color-wk-text-muted` | Label + footer text |
| `--color-wk-success-text` | Positive delta color |
| `--color-wk-danger-text` | Negative delta color |

## Usage & Conventions

> **Prop conventions** — this component uses one or more of the shared semantic prop names (`intent` / `variant` / `tone` / `surface`). See [Prop naming conventions](/extending/prop-naming-conventions) for the canonical vocabulary, alias matrix, and decision tree.