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="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' | 'success' | 'warning' | 'error' | 'missing'	'default'	Color.
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.

---

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' | 'success' | 'warning' | 'error' | 'missing'	'default'	Color.
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').