@eds/badge
v4.1.10
Badge
Indicates the status of an item.Prop | Required | Description | Type |
|---|---|---|---|
label | ✅ | Label of the status. | string |
tone | ✅ | Semantic tone to communicate the status. | "positive" | "informative" | "caution" | "critical" | "neutral" |
weight | — | Optionally set the colour weight to help emphasise the badge. Defaults to subtle. | "subtle" | "bold" |
maxWidth | — | Set the max width of the badge, truncating any overflowing text in label. Defaults to 100%. | string | numberSupports responsive prop syntax |
Prop | Required | Description | Type |
|---|---|---|---|
number | ✅ | Numeric label of the badge. | number |
tone | — | Optionally set the semantic tone to help convey the intent. Defaults to informative. | "positive" | "informative" | "caution" | "critical" | "neutral" |
weight | — | Optionally set the colour weight to help emphasise the badge. Defaults to bold. | "subtle" | "bold" |
cap | — | Optionally cap the number of the badge. When the number is greater than the cap value, the cap value will be displayed along with a +. | number |