Badge
Status and categorical labels.
Example
A representative composition rendered with the published package API.
FeaturedDraftSyncingAvailableLimitedUnavailableArchived
Options
The decisions most consumers need to make when adopting this family.
variantneutral · success · information · warning · danger · accent · outline
Neutral is for lifecycle states (Active, Enabled, Published); success only for positive evidence (Healthy, Ready, Verified); information for pending work; warning for problems that need action; danger for failures. Accent and outline are for taxonomy.
widthcontent-sized
Badges size to their text, even inside grid cells and stretched flex columns.
shaperounded (default) · pill
Pill is the conscia.com category tag. Use it for taxonomy such as service area or topic; status badges stay rounded.
| Option | Values or anatomy | Guidance |
|---|---|---|
variant | neutral · success · information · warning · danger · accent · outline | Neutral is for lifecycle states (Active, Enabled, Published); success only for positive evidence (Healthy, Ready, Verified); information for pending work; warning for problems that need action; danger for failures. Accent and outline are for taxonomy. |
width | content-sized | Badges size to their text, even inside grid cells and stretched flex columns. |
shape | rounded (default) · pill | Pill is the conscia.com category tag. Use it for taxonomy such as service area or topic; status badges stay rounded. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { Badge } from "@conscia-labs/design-system";