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:
import { ControlStatusBadge } from "@eqtylab/equality";Basic usage requires only a status prop:
<ControlStatusBadge status="In Progress" />Variants
With Icons (default)
Not Started
In Progress
Ready for Review
In Review
Compliant
Non-compliant
Not Applicable
Accepted
Questioned
Comment
Label Only
Not Started
In Progress
Ready for Review
In Review
Compliant
Non-compliant
Not Applicable
Accepted
Questioned
Comment
Icon Only
Display Options
The component supports three display modes:
With Icon and Label (Default)
The default display shows both icon and label:
<ControlStatusBadge status="in-progress" />Icon Only
Show only the icon by setting display to "icononly":
<ControlStatusBadge status="compliant" display="icononly" />Label Only
Show only the text by setting display to "textonly":
<ControlStatusBadge status="non-compliant" display="textonly" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | string | Required | The status value that determines the badge variant, icon, and label. |
display | "both" | "textonly" | "icononly" | "both" | Controls what elements are displayed. "both" shows icon and text, "textonly" shows only text, "icononly" shows only icon. |