Intentwise Primitives

Indicators

Small inline components for showing trends, progress, and micro-charts. These are commonly embedded within cards, tables, and other larger components.

Badge

Tones

A small status pill (NEW / BETA / counts, etc.). Pass a string shorthand to infer the tone from the text, or set tone explicitly. The same primitive powers the DashboardSidebar badges.

NEW

new

BETA

beta

INFO

info

LIVE

success

PRO

warning

HOT

danger

SOON

neutral

count

Show code

import { Badge } from '@intentwise/primitives';

<Badge tone="new">NEW</Badge>
<Badge tone="beta">BETA</Badge>
<Badge tone="info">INFO</Badge>
<Badge tone="success">LIVE</Badge>
<Badge tone="warning">PRO</Badge>
<Badge tone="danger">HOT</Badge>
<Badge tone="neutral">SOON</Badge>
{/* 'count' renders a solid full-color pill for numeric indicators */}
<Badge tone="count">12</Badge>

Sizes

Available in xs, sm (default), md, and lg.

NEW

Show code

<Badge tone="new" size="xs">NEW</Badge>
<Badge tone="new" size="sm">NEW</Badge>
<Badge tone="new" size="md">NEW</Badge>
<Badge tone="new" size="lg">NEW</Badge>

Position

When a badge sits next to a label that can wrap, position controls its cross-axis alignment (top / center / bottom). The DashboardSidebar uses position='top'.

top

Label that wraps onto two linesNEW

center

Label that wraps onto two linesNEW

bottom

Label that wraps onto two linesNEW

Show code

<span className="flex items-stretch gap-2">
  <span>Label that wraps onto two lines</span>
  <Badge tone="new" position="top">NEW</Badge>
</span>

Pill

Count chip

A rounded count chip — the vertically-centered counterpart to Badge. Use it for numeric indicators (unread / notification counts) that sit right next to a label. A bare string defaults to the solid count tone. The DashboardSidebar renders count-tone items as a Pill.

31299+58

Show code

import { Pill } from '@intentwise/primitives';

{/* default solid 'count' tone */}
<Pill>3</Pill>
<Pill>12</Pill>
<Pill>99+</Pill>
{/* other tones reuse the Badge tone scale */}
<Pill tone="danger">5</Pill>
<Pill tone="neutral">8</Pill>

Sizes

Available in xs, sm (default), and md.

Show code

<Pill size="xs">12</Pill>
<Pill size="sm">12</Pill>
<Pill size="md">12</Pill>

Badge vs Pill next to a label

Tag-style Badges hug the top of the label line (position='top'); Pills sit vertically centered. This is exactly how the DashboardSidebar treats tag badges vs count chips.

CampaignsNEWInbox12

Show code

{/* tag badge — top aligned */}
<span className="flex items-start gap-1.5">
  <span>Campaigns</span>
  <Badge tone="new" size="xs">NEW</Badge>
</span>

{/* count pill — centered */}
<span className="flex items-center gap-1.5">
  <span>Inbox</span>
  <Pill size="xs">12</Pill>
</span>

TrendBadge

Variants

TrendBadge shows a value with a directional arrow. Supports positive, negative, and neutral trends.

12.5%MoM

Positive

8.3%MoM

Negative

0.0%MoM

Neutral

2.1%ACoS

Inverted (ACoS)

Show code

<TrendBadge data={{ value: 12.5, format: 'percent', trend: 'up', label: 'MoM' }} />

Sizes

Available in sm, md, and lg sizes.

12.5%MoM

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.

12.5%8.3%0.0%

Show code

<TrendBadge data={data} variant="pill" />

VersionSwitch

Default (pill) variant

A pill-shaped indicator for opting users into a redesigned experience. Place next to the workspace logo or in the utility zone of a top bar.

Default

With Beta tag

With tooltip

With New tag

Back to Classic

Switch to Classic UI

Show code

<VersionSwitch data={{ label: 'Switch to New UI', tag: 'Beta' }} onSwitch={() => {}} />

Variants

Six visual treatments for different levels of urgency: soft pill, solid CTA, outline, ghost link, compact chip, and a segmented two-option toggle.

Pill (default)

Switch to Classic UI (on New)

Solid CTA

Outline

Ghost link

Compact (accent dot)

Segmented (on Classic)

Segmented (on New)

Show code

<VersionSwitch data={data} variant="solid" />
<VersionSwitch data={data} variant="outline" />
<VersionSwitch data={data} variant="ghost" />
<VersionSwitch data={data} variant="compact" />
<VersionSwitch data={{ current: 'classic', tag: 'Beta' }} variant="segmented" />

Tooltip

Optional tooltip via data.tooltip (styled custom tooltip) or tooltipContent prop for rich React content. Useful for explaining Beta status or switch behavior.

Show code

<VersionSwitch
  data={{
    label: 'Switch to New UI',
    tag: 'Beta',
    tooltip: 'Try the redesigned experience. Features may change during Beta.',
  }}
  onSwitch={() => {}}
/>

<VersionSwitch
  data={{ label: 'Switch to New UI', tag: 'Beta' }}
  tooltipContent={
    <div>
      <p className="font-medium">New UI (Beta)</p>
      <p>Updated navigation and faster reporting workflows.</p>
    </div>
  }
/>

Sizes

Available in sm, md, and lg sizes.

Show code

<VersionSwitch data={data} size="lg" />

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

Ad Spend Pacing45.0%

Budget Utilization72.0%

Over Target95.0%

Show code

<ProgressBar data={{ value: 72, label: 'Budget', status: 'warning' }} />

Sizes

Available in sm, md, and lg sizes.

Small60.0%

Medium (default)60.0%

Large60.0%

Show code

<ProgressBar data={data} size="lg" />

CategoryBar

Proportional Segments

CategoryBar shows proportional segments with auto-coloring from the chart palette.

DeltaBar

Positive & Negative Changes

DeltaBar shows +/- change from a center origin. Supports inverted coloring for metrics where decrease is positive.

Revenue Growth

+12.0%

ACoS Change

-8.0%

Show code

<DeltaBar data={{ value: 12 }} />

ProgressCircle

Status Colors

Circular progress indicator with status-based ring colors and center value display.

45.0%On Track

72.0%Pacing

95.0%Over

Show code

<ProgressCircle data={{ value: 72, status: 'warning', label: 'Pacing' }} size="lg" />

Sizes

Available in xs, sm, md, lg, and xl.

72.0%

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

🔍organic dog food

$12.4K

🔍premium cat treats

$9,800

🔍pet supplements

$7,200

🔍natural pet shampoo

$5,100

🔍dog dental chews

$3,400

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

22 good

6 warning

2 critical

Show code

<Tracker data={{ cells: [...] }} title="Campaign Health" />