Indicator

Small visual elements that highlight status, counts, or draw attention. Aurora ships two — DotIndicator (a colored circle, for state) and NumberIndicator (a numeric pill with optional suffix, for counts). Used inside Tag, Tabs, navigation badges, and anywhere a status or count needs to surface in tight space.

3

12

When to use which

• DotIndicator for status-only signals on list items, table rows, or nav entries — a state dot when no number is needed ("is the build passing", "is there an unread message")
• NumberIndicator as an unread / active count badge on icons, avatar stacks, or tab labels ("3 unread", "12 active filters")

When not to use an Indicator

• You need a full inline label (e.g. "Active", "Pending", "Failed") — use a Tag instead. Indicators are minimal-chrome signals, not labels.
• You're relying on color alone to communicate state — pair the dot with a tooltip or a visually-hidden label so colorblind and screen-reader users get the same information.

DotIndicator

Simple visual marker for status. No text — just a colored dot that conveys the state through its variant color.

<DotIndicator variant="default" />
<DotIndicator variant="neutral" />
<DotIndicator variant="success" />
<DotIndicator variant="warning" />
<DotIndicator variant="error" />
<DotIndicator variant="missing" />
<DotIndicator disabled />

DotIndicator — Sizes

<DotIndicator size="sm" />
<DotIndicator size="md" />

DotIndicator — Props

Prop	Type	Default	Description
variant	'default' | 'neutral' | 'success' | 'warning' | 'error' | 'missing'	'default'	Color. default is CTA blue — use neutral for a grey "inactive/off" dot.
size	'sm' | 'md'	'md'	sm = 8px (w-2 h-2), md = 12px (w-3 h-3).
disabled	boolean	false	Override color with the disabled token.

---

IndicatorStack

A row of overlapping status dots — for surfacing several states at once on a single list item, table row, or nav entry (e.g. a sidebar item that is both missing data and has a warning).

The gaps between the dots are cut out of the SVG, not faked with a background-colored border. That makes the stack surface-agnostic: the slits stay genuinely transparent on any background, including one that changes color on hover or active — there is no border color to keep in sync with the surface.

Hover me — gaps stay transparent

On a gradient — still no seam

<IndicatorStack :statuses="['error', 'missing', 'warning']" />

IndicatorStack — Sizes

size picks the dot diameter — xs (4px), sm (8px) or md (10px). md matches the legacy sidebar status dot and is the default. xs is a marker rather than a badge: at 4px the dot reads as a coloured bead beside something else (a PageMinimap tick) instead of a count you're meant to read.

<IndicatorStack :statuses="['error', 'warning', 'missing', 'success']" size="xs" />
<IndicatorStack :statuses="['error', 'warning', 'missing', 'success']" size="sm" />
<IndicatorStack :statuses="['error', 'warning', 'missing', 'success']" size="md" />

IndicatorStack — Props

Prop	Type	Default	Description
statuses	IndicatorStackStatus[]	[]	Statuses to show, in render order (left to right). 'error' | 'warning' | 'missing' | 'success' | 'dirty' | 'default'. dirty marks unsaved changes. Colors are owned by the component.
size	'xs' | 'sm' | 'md'	'md'	Dot diameter — xs is 4px, sm is 8px, md is 10px (matches the legacy sidebar dot).

---

NumberIndicator

Numeric badge for counts — unread tallies, filter counts, status counters. Pair with a suffix (e.g. '+') to express bounded counts ("99+"). For decorative non-numeric labels, use Tag instead.

3

12

99

5

2

7

<NumberIndicator :badge="3" variant="default" />
<NumberIndicator :badge="12" variant="success" />
<NumberIndicator :badge="99" variant="warning" />
<NumberIndicator :badge="5" variant="error" />

NumberIndicator — Outline

3

12

99

5

<NumberIndicator :badge="3" variant="default" outline />
<NumberIndicator :badge="12" variant="success" outline />

NumberIndicator — Sizes

3

3

<NumberIndicator :badge="3" size="sm" />
<NumberIndicator :badge="3" size="md" />

NumberIndicator — With suffix

The suffix is appended to the badge value verbatim — useful for unit suffixes like +, k, %.

99+

2k

42%

<NumberIndicator :badge="99" suffix="+" />
<NumberIndicator :badge="2" suffix="k" />
<NumberIndicator :badge="42" suffix="%" />

NumberIndicator — Props

Prop	Type	Default	Description
badge	number	required	The number to display.
variant	'default' | 'neutral' | 'success' | 'warning' | 'error' | 'missing'	'default'	Color. default is CTA blue — neutral is the grey used by Tag variant="neutral" badges.
size	'sm' | 'md'	'sm'	sm is 16px tall, md is 20px tall.
outline	boolean	false	Use the lighter outline-style background instead of the inverse-filled one.
disabled	boolean	false	Override colors with the disabled tokens.
suffix	string	—	Trailing string appended to badge (e.g. '+', 'k').