StatusDot

Standalone status indicator dot for presence and connection states.

Examples

Default

<StatusDot label="Online" />

Colors

<div
  style={{
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    flexWrap: 'wrap',
  }}>
  {colors.map(color => (
    <StatusDot color={color} key={color} label={color} />
  ))}
</div>

Sizes

<div style={{display: 'flex', alignItems: 'center', gap: 16}}>
  <StatusDot label="Online" size="sm" />
  <StatusDot label="Online" size="md" />
  <StatusDot label="Online" size="lg" />
</div>

With Icon

<div style={{display: 'flex', alignItems: 'center', gap: 16}}>
  <StatusDot icon={<Check />} label="Verified" size="md" />
  <StatusDot color="error" icon={<X />} label="Unavailable" size="lg" />
</div>

With Ring

<div
  className={css({bg: 'surface.blue', borderRadius: 'md'})}
  style={{display: 'flex', alignItems: 'center', gap: 16, padding: 24}}>
  <StatusDot hasRing label="Online" size="md" />
  <StatusDot label="Online" size="md" />
</div>

In AList Row

• eu-west-1
• us-east-2
• ap-south-1

<ul style={{display: 'grid', gap: 8, listStyle: 'none', margin: 0}}>
  {(
    [
      ['eu-west-1', 'success', 'Connected'],
      ['us-east-2', 'neutral', 'Standby'],
      ['ap-south-1', 'error', 'Unreachable'],
    ] as const
  ).map(([server, variant, label]) => (
    <li
      key={server}
      style={{display: 'flex', alignItems: 'center', gap: 8}}>
      <StatusDot color={variant} label={label} size="sm" />
      <span>{server}</span>
    </li>
  ))}
</ul>

On Avatar

AL

<Avatar
  name="Ada Lovelace"
  size="medium"
  status={<AvatarStatusDot icon={<Check />} label="Verified" />}
/>

API

StatusDot

Standalone status indicator dot for presence and connection states.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
color	"error" | "info" | "success" | "warning" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray" | "neutral"	'success'	Visual color. Accepts the same colors as Badge.
data-testid	string	—	Test ID applied to the root element.
hasRing	boolean	—	Renders a background-colored ring around the dot so it punches out of the element behind it, as when overlapping an Avatar. Default is false.
icon	ReactNode	—	Optional icon rendered inside md and lg dots.
label*	string	—	Accessible label describing the status, such as "Online".
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
size	"sm" | "md" | "lg"	—	Visual size of the dot: sm is 10px with no icon, md is 20px, and lg is 32px. Default is md.
style	CSSProperties	—	Inline styles applied to the root element.