StatusBadge

StatusBadge renders a compact pill for a status value. By default it derives its color from the status text, so common statuses ("Approved", "Rejected", "In progress"…) get sensible colors automatically. You can override colors per status when you need brand-specific mapping.

When to use

• Show a record's state in a table cell, card, or header (workflow status, priority, health).
• Anywhere you'd otherwise hand-roll a colored <span> for a short status label.

Import

import { StatusBadge } from '@spartanfx/react';

Basic usage

Only status is required. The color is chosen from the text.

<StatusBadge status="Approved" />
<StatusBadge status="Rejected" />
<StatusBadge status="In progress" />

Custom colors

Map specific status values to your own colors with colors (keys match possible status values):

<StatusBadge
  status="Blocked"
  colors={{ Blocked: '#b91c1c' }}
  bordered
/>

Inside a DataTable

A common pattern is rendering a status column as a badge:

const columns = [
  {
    key: 'status',
    name: 'Status',
    fieldName: 'status',
    onRender: (item) => <StatusBadge status={item.status} />,
  },
];

Key props

Prop	Type	Default	Notes
status (required)	string	—	Text shown, and the basis for the auto color.
colors	Record<string, string>	—	Per-status color overrides.
bordered	boolean	false	Render with a border.
className	string	—	Class on the outer container.

See the full generated reference: StatusBadge API ↗.

See also

• DataTable
• Components overview