Status

Status components are used to visually display the state of an entity — online/offline, healthy/abnormal. Three sub-components are provided for different granularity requirements.

Component Overview

Component	Description	Typical Use Case
<TStatus>	Text label with optional leading dot	Table columns, detail descriptions
<TStatusDot>	Standalone dot, animation controllable	Navigation bar, avatar status indicator
<TStatusIndicator>	Three bouncing dots, always animated	Loading, real-time connection indicator

---

TStatus — Text Status Label

Adds a semantic status dot next to text. Supports 13 preset colors.

Basic Usage

View Code

<div class="d-flex gap-3">
    <TStatus color="blue">Blue</TStatus>
    <TStatus color="azure">Azure</TStatus>
    <TStatus color="indigo">Indigo</TStatus>
    <TStatus color="purple">Purple</TStatus>
    <TStatus color="pink">Pink</TStatus>
    <TStatus color="red">Red</TStatus>
    <TStatus color="orange">Orange</TStatus>
    <TStatus color="yellow">Yellow</TStatus>
    <TStatus color="lime">Lime</TStatus>
    <TStatus color="green">Green</TStatus>
    <TStatus color="teal">Teal</TStatus>
    <TStatus color="cyan">Cyan</TStatus>
</div>

Dot Mode

When dot is enabled, a dot appears before the text. Ideal for real-time status display.

<div class="d-flex gap-3">
    <TStatus dot>Default</TStatus>
    <TStatus dot color="green">Online</TStatus>
    <TStatus dot color="red">Offline</TStatus>
    <TStatus dot color="orange">Away</TStatus>
    <TStatus dot color="yellow">Busy</TStatus>
</div>

Dot Pulse Animation

When animated is enabled, the dot will pulse to draw attention to real-time state changes.

<div class="d-flex gap-3">
    <TStatus dot animated color="green">Online</TStatus>
    <TStatus dot animated color="red">Offline</TStatus>
    <TStatus dot animated color="orange">Away</TStatus>
</div>

Dot + Lite Variants

lite provides a softer, filled-background appearance. Best used with dot — using lite alone on a light background has low visual distinction.

<div class="d-flex gap-3">
    <TStatus dot lite color="green">Online</TStatus>
    <TStatus dot lite color="red">Offline</TStatus>
    <TStatus dot lite color="orange">Away</TStatus>
    <TStatus dot lite color="blue">Info</TStatus>
</div>

---

TStatusDot — Standalone Status Dot

A compact dot without text. Animation is enabled by default. Commonly used for avatar status markers or navigation bar indicators.

<StatusDot color="green"/>
    <TStatusDot color="red"/>
    <TStatusDot color="orange"/>
    <TStatusDot color="blue"/>
    <TStatusDot color="purple"/>
    <TStatusDot color="teal"/>
</div>

Disable Animation

Set :animated="false" for a static dot — suitable for non-real-time scenarios or performance-sensitive areas.

<div class="d-flex gap-3 align-items-center">
    <TStatusDot color="green" :animated="false"/>
    <TStatusDot color="red" :animated="false"/>
    <TStatusDot color="orange" :animated="false"/>
    <TStatusDot color="blue" :animated="false"/>
</div>

---

TStatusIndicator — Three-dot Status Indicator

Three bouncing circles for continuous waiting feedback (loading, connecting, etc.). Animation always on.

<div class="d-flex gap-3 align-items-center">
    <TStatusIndicator color="green"/>
    <TStatusIndicator color="blue"/>
    <TStatusIndicator color="red"/>
    <TStatusIndicator color="orange"/>
    <TStatusIndicator color="purple"/>
    <TStatusIndicator color="teal"/>
</div>

---

API

TStatus Props

Prop	Type	Default	Description
color	BaseColor	'blue'	Color: blue / azure / indigo / purple / pink / red / orange / yellow / lime / green / teal / cyan
dot	boolean	false	Show a leading status dot
animated	boolean	false	Enable pulse animation on the dot (requires dot)
lite	boolean	false	Use a light filled background (best used with dot)

TStatus Slots

Slot	Description
default	Text content of the status label

TStatusDot Props

Prop	Type	Default	Description
color	BaseColor	'blue'	Dot color
animated	boolean	true	Enable pulse animation

TStatusIndicator Props

Prop	Type	Default	Description
color	BaseColor	'blue'	Indicator color (animation always on)