Status

A versatile status badge that can display a background-colored pill with an optional icon and label, or a plain circular color dot when no label or icon is provided (or when shape="circle" is set). Text color is automatically derived from the background color's brightness (dark backgrounds get white text, light backgrounds get the theme shade color).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | color | string | No | 'transparent' | Background color. Accepts theme keys or CSS color strings. | | label | string | No | — | Text label displayed inside the badge. | | labelColor | string | No | auto-computed | Explicit label color, overrides automatic brightness detection. | | labelSize | number | No | size-dependent | Font size of the label in pixels. | | labelStyle | React.CSSProperties | No | — | Inline styles for the label text. | | icon | string | No | — | Icon name displayed alongside the label. | | iconPaths | any[] | No | — | Custom SVG paths for the icon. | | iconColor | string | No | auto-computed | Explicit icon color, overrides automatic brightness detection. | | iconSize | number | No | size-dependent | Size of the icon in pixels. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number \| \${number}px`| No |'md'| Size of the badge. Token values map to preset padding and font sizes; numbers and pixel strings set the circle diameter. | |shape|'circle'| No | — | Forces a circular color-dot rendering regardless of label/icon. | |width|number | string| No | — | Explicit width (used in dot mode). | |height|number | string| No | — | Explicit height (used in dot mode). | |borderRadius|number | string| No |4| Border radius for the pill shape. | |containerStyle|React.CSSProperties| No | — | Inline styles for the container. | |containerClassName|string| No |'status-container'` | CSS class name for the container. |

Usage

Colored pill with label

import Status from '@/components/Status';

export default function Example() {
  return <Status color="success" label="Active" icon="check" />;
}

Color-dot indicator

import Status from '@/components/Status';

export default function Example() {
  // No label or icon → renders a circle dot
  return <Status color="#e74c3c" size="sm" />;
}

Dynamic color from item data

import Status from '@/components/Status';

const item = { statusLabel: 'Pending', statusColor: '#f39c12' };

export default function Example() {
  return (
    <Status
      color={item.statusColor}
      label={item.statusLabel}
      size="md"
    />
  );
}