Presence Badge

A badge is a visual decoration for UI elements. Different badges can display numerical values, status, or text.

Best Practices

Badge information should be surfaced as part of the control that it is associated with, because, badges themselves do not receive focus meaning they are not directly accessible by screen readers. If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.

Badges should be given a meaningful description. This description will be applied, via “aria-describedby” to the element decorated by the Badge. For example, "Chat, 6 unread" or similar. General guidance is that the badge icon is marked as “aria-hidden” by default.

Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included using aria-describedby

Badges are intented to have short text, small numerical values or status information. Long text is not supported and should not be used within a Badge.

Name	Description	Default
ref	((instance: HTMLDivElement \| null) => void) \| RefObject<HTMLDivElement> \| null	-
as	"div"	-
size	A Badge can be on of several preset sizes. "small""medium""large""extra-large""tiny""extra-small"	-
status	Represents several status "outOfOffice""busy""away""available""offline""doNotDisturb"	"available"
outOfOffice	Modifies the display to indicate that the user is out of office. This can be combined with any status to display an out-of-office version of that status boolean	false

Stories

A presence badge supports tiny, extra-small, small, medium, and extra-large sizes. The default is medium.

A presence badge supports available, away, busy, doNotDisturb, offline, and outOfOffice status. The default is available.

A presence badge supports available, away, busy, doNotDisturb, offline, or outOfOffice status when outOfOffice is set.