Sparkbar

Overview

Compact labeled meter with a thin horizontal fill bar for inline cost, token, budget, or quota breakdowns.

Usage

<script lang="ts">
  import { Sparkbar } from '@lostgradient/cinder/sparkbar';
</script>

<Sparkbar value={0.31} label="Draft weekly changelog" trailing="$0.31" />

Theming

Sparkbar inherits its foreground from currentColor and keeps its background transparent. The default accent fill uses the first resolved --cinder-chart-series-* color, and a partial theme can override that palette. The success and warning variants keep their semantic status tokens; the meter's filled position communicates magnitude independently of color.

Live preview

When to use

Use when

Comparing several bounded values in dense rows, such as per-step spend, token usage, or budget consumption.

Avoid when

Showing task completion or loading progress. Use Progress instead
Rendering a full cartesian chart with axes, scales, or multiple series. Use Bar Chart instead

Examples

Basic sparkbars

Compact bounded meters for inline spend and usage rows.

Custom range

Use a max value when the measurement is not fractional.

Props

Props for sparkbar
Name	Type	Default	Description
`value` required	`number`		Current bounded value.
`max`	`number`	`1`	Upper bound for the range. Defaults to `1` for fractional values.
`label` required	`text`		Visible label for the measured row.
`trailing`	`text`		Optional trailing value such as a cost, token count, or percentage.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track thickness and text scale. Default `md`.
`variant`	`'accent' \| 'success' \| 'warning'`	`'accent'`	Fill color intent. Default `accent`.
`theme`	`ChartTheme`		Partial visual theme override. Omitted fields inherit the surrounding application.
`ariaLabel`	`text`		Accessible name override. Defaults to `${label}, ${percentage}%`.
`ariaValueText`	`text`		Accessible value text override. Defaults to the trimmed trailing value when provided.