Indicator

Indicator is a small colored dot used to communicate status — online/offline, notification state, or activity.

ExamplesCodeUsageChangelog

All colors

green

red

yellow

gray

blue

purple

indigo

pink

orange

Tailwind v4

<Indicator color="green" />
<Indicator color="red" />
<Indicator color="yellow" />
<Indicator color="gray" />
<Indicator color="blue" />
<Indicator color="purple" />
<Indicator color="indigo" />
<Indicator color="pink" />
<Indicator color="orange" />

Sizes

xs (6px)

sm (8px)

md (10px)

lg (14px)

Tailwind v4

<Indicator color="blue" size="xs" />
<Indicator color="blue" size="sm" />
<Indicator color="blue" size="md" />
<Indicator color="blue" size="lg" />

Bordered

Use bordered when placing an indicator on a colored background so it visually "pops".

Tailwind v4

<!-- Works great on colored backgrounds -->
<div style="background:#3b82f6;padding:16px">
  <Indicator color="green" :bordered="true" />
  <Indicator color="red" :bordered="true" />
  <Indicator color="yellow" :bordered="true" />
</div>

Positioned on an avatar

Set position to place the indicator absolutely at a corner. The parent must have position: relative.

ST

JL

AK

Tailwind v4

<!-- Wrap in a relative container -->
<div style="position:relative;display:inline-flex">
  <Avatar name="Sam Torres" size="md" />
  <Indicator color="green" size="sm" position="bottom-right" :bordered="true" />
</div>

Props

Prop	Type	Default	Description
color	'green' | 'red' | 'yellow' | 'gray' | 'blue' | 'purple' | 'indigo' | 'pink' | 'orange'	'gray'	Dot color
size	'xs' | 'sm' | 'md' | 'lg'	'md'	Dot size (6px / 8px / 10px / 14px)
bordered	boolean	false	Adds a white outline ring — useful on colored backgrounds
position	'static' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'static'	When not static, renders with position: absolute at the chosen corner