Status badge
Status badges are visual indicators used to highlight an item’s status for quick recognition.
import { ... } from '@ag.ds-next/react/status-badge';Usage
Status badge components can be imported via the status-badge entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/status-badge';Props
| Prop | Type | Description |
|---|---|---|
| label | ReactNode | The text label in the badge. |
| appearance? | StatusBadgeAppearanceDefault: "regular" | The visual appearance of the badge. |
| tone? | "info" | "success" | "error" | "warning" | "cannotStartLow" | "errorHigh" | "errorLow" | "errorMedium" | "infoHigh" | "infoLow" | "infoMedium" | "inProgressLow" | "notStartedLow" | ... 9 more ...Default: "info" | Determines the colour, icon and announcement of the badge. |
| weight? | StatusBadgeAppearanceDefault: "regular" | @deprecated The visual weight to apply. |
Source
You can view the full source code for this package on Github.