Badge

Badge is a label that indicates status or importance. Badges should provide quick recognition.\n

Package: @terreno/ui
Categories: Component
Props interface: BadgeProps
Story source: demo/stories/Badge.stories.tsx

Live demo

Live preview from the Terreno component demoOpen in playground ↗

Props

Prop	Type	Required	Description
color	union		For the "status" variant, whether the dot uses the bold (saturated) or subtle (light) tone.
customBackgroundColor	string		When status is "custom", determines the badge's background color.
customBorderColor	string		When status is "custom", determines the badge's border color.
customIconColor	keyof TextTheme		When status is "custom", determines the badge's icon color
customIconName	IconName		When status is "custom", determines the badge's icon
customTextColor	string		When status is "custom", determines the badge's text color.
iconName	IconName		The name of the icon to display in the badge.
maxValue	number		The maximum value to display. Used for "numberOnly" variant to display "${maxValue}+" when value is greater than max.
secondary	boolean		If true, the badge will have a secondary style.
status	union		The status of the badge. Determines its color and appearance.
testID	string		Root test id for the primary interactive element or container.
value	union		The text or number to display inside the badge.
variant	union		The variant of the badge. "status" renders a small colored dot (no text) used to indicate an active/modified state.