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

Plain ticker

MRR $12,400

<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:

Ticker with delta

Revenue $31,200 +12%

Churn 3.2% -5%

CAC $120 0%

<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:

Absolute delta format

Orders 340 +25

<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:

Intent override — up is bad

Error Rate 2.1% +5%

Bounce Rate 34% -8%

<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

All size variants

Small $1,200 +5%

Medium $1,200 +5%

Large $1,200 +5%

<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>

Add context text below the value:

Ticker with footer

MRR $12,400 +8% vs last month

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

Dashboard Grid

Ticker dashboard row

Revenue $31.2k +12%

Users 1,240 +8%

Churn 2.4% -3%

NPS 62 0%

<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 for the canonical vocabulary, alias matrix, and decision tree.