Components
Astryx Avatar Status Dot
AvatarStatusDot shows a user's presence state (online, away, busy) as a colored dot anchored to an Avatar, from Meta's Astryx design system. Pass it to Avatar's status slot; variants map to success, neutral, and error colors with an accessible label.
'use client';
import AvatarStatusDot, {Avatar} from '@/components/ui/astryx-avatar-status-dot';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {HStack} from '@astryxdesign/core/Layout';
export default function AvatarStatusDotShowcase() {
return (
<Theme theme={neutralTheme}>
<div
style={{
minHeight: '100dvh',
display: 'grid',
placeItems: 'center',
padding: 24,
}}>
<HStack gap={4} vAlign="center">
<Avatar
name="Online User"
size="large"
status={<AvatarStatusDot variant="success" label="Online" />}
/>
<Avatar
name="Away User"
size="large"
status={<AvatarStatusDot variant="neutral" label="Away" />}
/>
<Avatar
name="Busy User"
size="large"
status={<AvatarStatusDot variant="error" label="Busy" />}
/>
</HStack>
</div>
</Theme>
);
}
Dependencies
Source
Published
Similar components
Explore more
Part of Astryx — browse the full library on 21st.dev.