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

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	Required	Description
`value`	`number`		req	Current bounded value.
`max`	`number`	`1`		Upper bound for the range. Defaults to `1` for fractional values.
`label`	`text`		req	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`.
`ariaLabel`	`text`			Accessible name override. Defaults to `${label}, ${percentage}%`.
`ariaValueText`	`text`			Accessible value text override. Defaults to the trimmed trailing value when provided.