PresenceBadge

PresenceBadge shows a person's availability: available, busy, away, offline…

Uses Fluent's presence icons (filled for available, away, busy and do-not-disturb; outlined for offline, blocked, out-of-office and with outOfOffice) in the status token colors. It has role="img" and a Vietnamese aria-label. Add ring when it sits on top of an Avatar, to separate it from the image.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { PresenceBadge } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

AvailableAwayBusyDo not disturbOfflineOut of officeBlockedUnknown

Status

Eight statuses. Show the status as text next to it when there is room (don't rely on color alone).

Out of office

outOfOffice switches to the outlined icon and keeps the status color (away/offline turn purple).

Size

tiny 6px · extra-small 10 · small 12 · medium 16 (default) · large 20 · extra-large 28.

On an Avatar

ring adds a 2px border in the background color. Position it with logical properties (-inset-e-px) so it is also correct in RTL.

Usage

Match the size to the Avatar (Avatar 32 → small, 48 → medium, 64+ → large).
Turn on ring when it sits on top of an image or Avatar.
Show the status as text as well in lists and user profiles.

Don't

Don't change the status colors to match the brand.
Don't use PresenceBadge for system status (a server being online/offline). Use Badge or MessageBar.

Props

Prop · Type	Default	Description
status"available" \| "away" \| "busy" \| "do-not-disturb" \| "offline" \| "out-of-office" \| "blocked" \| "unknown"	Default: "available"	Presence status.
outOfOfficeboolean	Default: false	Out of office: outlined icon, and “Out of office” is added to the label.
size"tiny" \| "extra-small" \| "small" \| "medium" \| "large" \| "extra-large"	Default: "medium"	6 / 10 / 12 / 16 / 20 / 28px.
ringboolean	Default: false	ring-2 ring-background-1 border for use on an Avatar.
labelstring	Default: —	Overrides the aria-label (default: “Available”, “Busy”…).

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.presenceBadge

Key · Type	Default (English)	messagesVi
availablestring	Default (English)`"Available"`	messagesVi`"Có mặt"`
awaystring	Default (English)`"Away"`	messagesVi`"Vắng mặt"`
busystring	Default (English)`"Busy"`	messagesVi`"Bận"`
doNotDisturbstring	Default (English)`"Do not disturb"`	messagesVi`"Không làm phiền"`
offlinestring	Default (English)`"Offline"`	messagesVi`"Ngoại tuyến"`
outOfOfficestring Cũng được nối sau trạng thái chính (viết thường) khi bật `outOfOffice`.	Default (English)`"Out of office"`	messagesVi`"Không ở văn phòng"`
blockedstring	Default (English)`"Blocked"`	messagesVi`"Đã chặn"`
unknownstring	Default (English)`"Unknown"`	messagesVi`"Không xác định"`