Badge
Badge is used to display numeric status data.Generally available
The new badge appearances are stable and ready for adoption. Visual updates are currently behind the platform-dst-lozenge-tag-badge-visual-uplifts feature flag.
Installation
| Install | yarn add @atlaskit/badge |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/badge, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
| Description | Affects the visual style of the badge. Uses the new naming convention:
|
|---|---|
| Type | "success" | "danger" | "neutral" | "information" | "inverse" | "warning" | "discovery" | "informationBold" | "successBold" | "dangerBold" | "warningBold" | "discoveryBold" |
| Description | The value displayed within the badge. A |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
| Description | The maximum value to display. Defaults to |
|---|---|
| Type | number | false |
| Description | Style customization to apply to the badge. Only |
|---|---|
| Type | { backgroundColor?: BackgroundColor; color?: Color; } |
| Description | A |
|---|---|
| Type | string |