StatusLight
Status lights are used to color code categories and labels commonly found in data visualization. When status lights have a semantic meaning, they should use semantic variant colors.
Ready
variant
The variant changes the color of the status light.
When status lights have a semantic meaning, they should use the variant for semantic colors.
variant
size
API
| Name | Type | Default |
|---|---|---|
children | ReactNode | Default: — |
| The content to display as the label. | ||
variant | 'informative'
| 'neutral'
| 'positive'
| 'notice'
| 'negative'
| 'celery'
| 'chartreuse'
| 'cyan'
| 'fuchsia'
| 'purple'
| 'magenta'
| 'indigo'
| 'seafoam'
| 'yellow'
| 'pink'
| 'turquoise'
| 'cinnamon'
| 'brown'
| 'silver' | Default: — |
| The variant changes the color of the status light. When status lights have a semantic meaning, they should use the variant for semantic colors. | ||
size | 'S'
| 'M'
| 'L'
| 'XL' | Default: 'M'
|
| The size of the StatusLight. | ||
styles | StylesProp | Default: — |
Spectrum-defined styles, returned by the style() macro. | ||