Badge

Badge is used to display numeric status data.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/badge`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/badge, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`appearance`
Description	Affects the visual style of the badge. Uses the new naming convention: success: Green (replaces "added") danger: Red (replaces "removed" and "important") neutral: Gray (replaces "default") information: Blue (replaces "primary") inverse: Inverted colors (replaces "primaryInverted")
Type	`"warning" \| "success" \| "inverse" \| "discovery" \| "danger" \| "neutral" \| "information" \| "informationBold" \| "successBold" \| "dangerBold" \| "warningBold" \| "discoveryBold"`

`children`
Description	The value displayed within the badge. A `ReactNode` can be provided for custom-formatted numbers, however, badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`max`
Description	The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed. This value should be greater than 0. If set to `false` the original value will be displayed regardless of whether it is larger than the default maximum value.
Type	`number \| false`

`style`
Description	Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
Type	`{ color?: Color; backgroundColor?: BackgroundColor; }`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.