Indicator
Indicator component - display status with colored background and label
Indicator component - display status with colored background and label
import { Indicator } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
color | Optional | "red" | "gray" | "blue" | "yellow" | "green" | "purple" | "amber" | "slate" | undefined | 'gray' | Color variant of the indicator |
size | Optional | ComponentSize | undefined | 'md' | Size variant of the indicator |
className | Optional | string | undefined | — | Custom className for the root element |
vertical | Optional | boolean | undefined | false | When true, adds extra spacing between child elements and stacks them vertically. Useful for displaying multiple pieces of information (e.g. status + count) in a clear way. |
children | Optional | React.ReactNode | — | Children content (can include text, icons, multiple elements) |
onClick | Optional | (VoidFunction & React.MouseEventHandler<HTMLDivElement>) | undefined | — | Click handler |
Usage
A colored pill/badge used to display statuses, counts, or labels. Supports color variants, sizes, vertical stacking, and an optional click handler.
Example
/** * Runnable example for Indicator. */import { Indicator } from '@tetherto/mdk-react-devkit'export const IndicatorExample = () => ( <div className="mdk-example-col"> <div className="mdk-example-row"> <Indicator color="green">Online</Indicator> <Indicator color="red">Offline</Indicator> <Indicator color="amber">Maintenance</Indicator> <Indicator color="gray">Unknown</Indicator> </div> <div className="mdk-example-row"> <Indicator color="green" size="sm"> Running </Indicator> <Indicator color="blue" size="md"> Syncing </Indicator> <Indicator color="purple" size="lg"> Overclocked </Indicator> </div> <div className="mdk-example-row"> <Indicator color="green" vertical> <span>Running</span> <span>142</span> </Indicator> <Indicator color="red" vertical> <span>Offline</span> <span>23</span> </Indicator> </div> </div>)