Avatar Status Dot

component

Size-aware status indicator dot that reads avatar size from context and scales proportionally. Each variant pairs a colour with a distinct built-in shape (filled, ring, minus) so status is never conveyed by colour alone (WCAG 1.4.1).

pnpm dlx shadcn@latest add "https://astryx.atmeta.com/shadcn/component-avatar-status-dot.json"

Sign In

Avatar Status Dot

component

Size-aware status indicator dot that reads avatar size from context and scales proportionally. Each variant pairs a colour with a distinct built-in shape (filled, ring, minus) so status is never conveyed by colour alone (WCAG 1.4.1).

pnpm dlx shadcn@latest add "https://astryx.atmeta.com/shadcn/component-avatar-status-dot.json"

components/astryx/AvatarStatusDot.ts