Props

Prop	Type	Default	Description
variant	'success' | 'neutral' | 'error'	'success'	Semantic status, where colour comes with its own shape so the state never rests on colour alone: success is a filled dot, neutral is a hollow ring, and error is a dot with a minus bar across it. The older names info and warning are still accepted and draw as success and error.
label	string	—	Accessible name for the status, such as Online. Inside an Avatar it is composed into the avatar's own name (Jane Doe, Online); a standalone dot exposes role="img" with this name. When omitted the dot is aria-hidden, so it is invisible to assistive technology.

Size

The dot reads the size of the enclosing Avatar and picks one of three tiers, so it stays legible at every avatar size instead of shrinking without limit. Outside an Avatar it uses the default md size (36px).

Avatar size	Dot	Border	Icon
36px and under	10px	1px	not shown
37px to 72px	20px	2px	12px
73px and over	32px	4px	18px

Slots

• icon: an icon drawn in the middle of the dot. A rendered icon replaces the built-in shape glyph, so use a different icon per status. Icons are not drawn at the smallest tier, where there is no room for them to be legible.

Theming

.my-avatar-status-dot {
  --astryx-avatar-status-dot-size: 12px;
  --astryx-avatar-status-dot-border-width: 2px;
  --astryx-avatar-status-dot-border-color: #ffffff;
  --astryx-avatar-status-dot-success-background: #198100;
  --astryx-avatar-status-dot-success-foreground: #ffffff;
  --astryx-avatar-status-dot-neutral-background: #ffffff;
  --astryx-avatar-status-dot-neutral-foreground: #525252;
  --astryx-avatar-status-dot-error-background: #e33f4a;
  --astryx-avatar-status-dot-error-foreground: #ffffff;
}

size overrides the size the dot derived from the avatar; the shape drawn inside keeps the size it was computed at.