StatusBadge

Overview

StatusBadge displays a status the user created, not one the app defines: a lead status, a deal stage, a location state, a ticket category. These carry a colour and an icon chosen in the product, which is why it takes raw values where Badge takes tokens.

It composes Badge rather than restyling a pill, so it stays on the shared recipe automatically.

The important constraint: the user's colour only ever tints the dot or icon. The pill's surface and text stay white. A status is one value in a lifecycle, read down a column — the label is what you scan, and if the colour flooded the pill a column of statuses would read as a column of alarms.

If the colour is meant to be the coding itself, you want Tag. See Badges, Chips and Tags.

Basic Usage

import { StatusBadge } from '@fsai/shared-ui';

<StatusBadge label={status.name} color={status.color} iconId={status.iconId} />

With no iconId, it falls back to a colour dot:

<StatusBadge label="Qualified" color="#1f54de" />

With no color, the marker falls back to the default blue.

Import it directly

StatusBadge is imported from @fsai/shared-ui like any other component. The old InlineEntityManager.Badge alias has been removed — a status pill is not a part of a picker.

// ✓
import { StatusBadge } from '@fsai/shared-ui';

// ✗ no longer exists
<InlineEntityManager.Badge … />

Sizes

sm and md pass straight through to Badge, so a size means the same thing in both. A status pill sits in the same rows as ordinary badges; mapping it a rung up left status chips visibly larger than every badge beside them.

Height derives from the type scale — see Control Heights.

Props

Guidelines

• Do use StatusBadge whenever the status and its colour are user-created
• Do let it fall back to a dot when the user has not picked an icon
• Don't use it for statuses the app defines — those are semantic, so use Badge
• Don't flood the pill with the user's colour; that is Tag's job
• Don't wrap it to make it clickable — put it inside a row that is already a control, or use Chip