Intentwise Primitives
Indicators
Small inline components for showing trends, progress, and micro-charts. These are commonly embedded within cards, tables, and other larger components.
TrendBadge
Variants
TrendBadge shows a value with a directional arrow. Supports positive, negative, and neutral trends.
Positive
Negative
Neutral
Inverted (ACoS)
Show code
<TrendBadge data={{ value: 12.5, format: 'percent', trend: 'up', label: 'MoM' }} />Sizes
Available in sm, md, and lg sizes.
sm
md
lg
Show code
<TrendBadge data={data} size="sm" />
<TrendBadge data={data} size="md" />
<TrendBadge data={data} size="lg" />Pill Variant
Use variant='pill' for a pill-shaped badge with background color.
Show code
<TrendBadge data={data} variant="pill" />SparkLine
Variants
Compact inline charts — commonly embedded in table cells. Supports auto-coloring based on trend direction.
Show code
<SparkLine data={{ values: [10, 15, 12, 18, 22] }} autoColor />SparkBar
Mini Bar Charts
Compact bar charts for inline use in tables and cards. Supports auto-coloring and max value highlighting.
Show code
<SparkBar data={{ values: [10, 20, 15, 25, 18] }} autoColor />ProgressBar
With Status Colors
ProgressBar shows progress toward a goal with status-based coloring (good, warning, critical).
Show code
<ProgressBar data={{ value: 72, label: 'Budget', status: 'warning' }} />Sizes
Available in sm, md, and lg sizes.
Show code
<ProgressBar data={data} size="lg" />CategoryBar
Proportional Segments
CategoryBar shows proportional segments with auto-coloring from the chart palette.
Show code
<CategoryBar data={{ segments: [...] }} />DeltaBar
Positive & Negative Changes
DeltaBar shows +/- change from a center origin. Supports inverted coloring for metrics where decrease is positive.
Revenue Growth
ACoS Change
Show code
<DeltaBar data={{ value: 12 }} />ProgressCircle
Status Colors
Circular progress indicator with status-based ring colors and center value display.
Show code
<ProgressCircle data={{ value: 72, status: 'warning', label: 'Pacing' }} size="lg" />Sizes
Available in xs, sm, md, lg, and xl.
xs
sm
md
lg
xl
Show code
<ProgressCircle data={data} size="xl" />BarList
Top Keywords by Revenue
Ranked horizontal bar list for Top-N visualizations. Auto-sorts and supports icons, links, and truncation.
Top Keywords by Revenue
Last 30 days
Show code
<BarList data={{ items: [...], format: 'currency' }} title="Top Keywords" />Tracker
Campaign Health
Grid of status cells showing health over time. Each cell represents a day or event with a status color.
Campaign Health
Last 30 days
Show code
<Tracker data={{ cells: [...] }} title="Campaign Health" />