DDS/Components/StatusBadge

StatusBadge

Display

Badge with colored status indicator (online, offline, busy, away, pending).

Playground

Online

Controls

Status

Size

Show label

Pulse animation

Props

Prop	Type	Default	Description
`status`	`"online" \| "offline" \| "busy" \| "away" \| "pending"`	`"online"`	Status displayed.
`label`	`string`	`auto`	Custom label (overrides the default status label).
`showLabel`	`boolean`	`true`	Show or hide the label.
`pulse`	`boolean`	`false`	Ping animation for online status.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.

Examples

All statuses

OnlineOfflineAwayBusyPending

vue

<!-- All statuses -->
<DsStatusBadge status="online" />
<DsStatusBadge status="offline" />
<DsStatusBadge status="busy" />
<DsStatusBadge status="away" />
<DsStatusBadge status="pending" />

<!-- Pulse animation for live indicator -->
<DsStatusBadge status="online" :pulse="true" label="Live" />

<!-- Dot only (no text) -->
<DsStatusBadge status="online" :show-label="false" />

Skeleton

Use DsStatusBadgeSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsStatusBadgeSkeleton />

Accessibility

The color dot is purely decorative (implicitly aria-hidden). The text label carries the information.

StatCard

Tag