StatusBadge
import { StatusBadge } from '@enmovil/ui-design-system';
A coloured status pill. Its tone is picked automatically from common status strings, and you can override the tone, add a leading dot or change the label.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
className | string | No | — | — | Extra CSS class added to the badge, after its tone and size classes. |
status | string | Yes | — | — | Status string. Used both as label and to pick a tone if tone is unset. |
tone | string | No | — | 'info', 'teal', 'green', 'red', 'amber', 'slate', 'navy' | Override the auto-resolved tone |
dot | boolean | No | — | — | Show a leading dot indicator |
size | string | No | 'md' | 'md', 'sm' | Smaller padding/font |
label | ReactNode | No | — | — | Optional label override (defaults to humanized status) |
Other attributes
StatusBadge passes 271 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onClick | MouseEventHandler<HTMLSpanElement> | Fires when the badge is clicked, e.g. to filter a list by this status. |
onMouseEnter | MouseEventHandler<HTMLSpanElement> | Fires when the pointer enters the badge. |
onMouseLeave | MouseEventHandler<HTMLSpanElement> | Fires when the pointer leaves the badge. |
Children
StatusBadge does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Gallery example.
Loading playground…
Storybook
Open StatusBadge in Storybook to try every story with the full set of controls.