Control Status Badge
Displays a badge with consistent icons, colors, and labels for control status values.
Overview
ControlStatusBadge is a specialized badge wrapper that provides predefined status configurations for controls. It automatically applies appropriate icons, colors, and labels based on the status value.
Usage
Import the component from the Equality UI library:
tsx
import { ControlStatusBadge } from "@eqtylab/equality";Basic usage requires only a status prop:
tsx
<ControlStatusBadge status="In Progress" />Variants
Display Options
The component supports three display modes:
With Icon and Label (Default)
The default display shows both icon and label:
tsx
<ControlStatusBadge status="in-progress" />Icon Only
Show only the icon by setting display to "icon-only":
tsx
<ControlStatusBadge status="compliant" display="icon-only" />Label Only
Show only the text by setting display to "text-only":
tsx
<ControlStatusBadge status="non-compliant" display="text-only" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | string | Required | The status value that determines the badge variant, icon, and label. |
display | "both" | "text-only" | "icon-only" | "both" | Controls what elements are displayed. "both" shows icon and text, "text-only" shows only text, "icon-only" shows only icon. |