Status

Status

All States

ActiveInactiveErrorPending

Custom Labels

OnlineOfflineFailedProcessing

In Context

API ServerHealthy

DatabaseConnecting

CacheDown

Usage

import { Status } from "@f0rbit/ui";

<Status state="active" />

States

Four built-in states with appropriate colors:

<Status state="active" />   {/* Green */}
<Status state="inactive" /> {/* Gray */}
<Status state="error" />    {/* Red */}
<Status state="pending" />  {/* Yellow */}

Custom Labels

Override the default label with custom text:

<Status state="active" label="Online" />
<Status state="inactive" label="Offline" />
<Status state="error" label="Failed" />
<Status state="pending" label="Processing" />

In Context

Status works well in lists and tables:

<div>
  <span>API Server</span>
  <Status state="active" label="Healthy" />
</div>
<div>
  <span>Database</span>
  <Status state="pending" label="Connecting" />
</div>
<div>
  <span>Cache</span>
  <Status state="error" label="Down" />
</div>

Props

Prop	Type	Default	Description
state	"active" | "inactive" | "error" | "pending"	—	Status state determining color and default label
label	string	—	Custom label text (overrides default)