avatar status online offline indicator avatar status online offline presence dot indicator avatar with online status user avatar with presence indicator
Avatar With Status
Fetch pattern JSON:
curl https://webspire.de/patterns/avatar/with-status.json with-status.html
<div class="ws-avatar flex items-center gap-6">
<div class="relative">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">AB</span>
<span class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-[var(--ws-avatar-border)] bg-emerald-500" aria-label="Online"></span>
</div>
<div class="relative">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">CD</span>
<span class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-[var(--ws-avatar-border)] bg-slate-400" aria-label="Offline"></span>
</div>
<div class="relative">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">EF</span>
<span class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-[var(--ws-avatar-border)] bg-emerald-500" aria-label="Online"></span>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
avatarstatusonlineofflineindicator
Slots
| Name | Required | Description |
|---|---|---|
| initials | Yes | Two-letter initials displayed inside the avatar. |
| status | Yes | Status indicator dot (green for online, gray for offline). |
Avatar with a small status dot at the bottom-right corner indicating online (green) or offline (gray) presence. Ideal for chat and collaboration interfaces.