Neo-Brutalist Angular StatusDot

StatusDot

A directive on <span> that renders a status indicator dot. Three states — online, offline, and live — cover presence, availability, and real-time streaming use cases.

spanHost element

3States

Source ↗Open Docs

Preview

Online Offline Live

Usage

Import

import { NbStatusDot } from '@ng-brutalism/ui';

Template

<span nbStatusDot state="online"></span>
<span nbStatusDot state="offline"></span>
<span nbStatusDot state="live"></span>

States

online— green fill, indicates active presence

offline— muted fill, indicates unavailability

live— red pulsing dot, indicates real-time broadcast

API

Input	Type	Default	Description
state	'online' \| 'offline' \| 'live'	'online'	The visual state of the indicator.
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	The size of the indicator dot.
radius	NbRadius	'md'	The border radius of the indicator.