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.
Appearance
Badge supports both the new semantic appearance names and legacy appearance names for backward compatibility. Each example below shows the new semantic appearance prop value (top) alongside the legacy prop value (bottom).
Neutral
Use neutral for general-purpose numeric information that doesn't require semantic meaning. This is
the default appearance.
New: appearance="neutral" Legacy: appearance="default" (or omit the prop)
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewNeutralExample = (): React.JSX.Element => {
return (
<Stack space="space.100">
<Stack space="space.050" alignInline="center">
<Badge appearance="neutral">{8}</Badge>
<Text size="small" color="color.text.subtlest">
appearance="neutral"
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="default">{8}</Badge>
<Text size="small" color="color.text.subtlest">
appearance="default"
</Text>
</Stack>
</Stack>
);
};
export default BadgeNewNeutralExample;Information
Use information to draw attention to new or updated information, or to highlight informative
numeric data.
New: appearance="information" Legacy: appearance="primary"
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewInformationExample = (): React.JSX.Element => {
return (
<Stack space="space.100">
<Stack space="space.050" alignInline="center">
<Badge appearance="information">{12}</Badge>
<Text size="small" color="color.text.subtlest">
appearance="information"
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="primary">{12}</Badge>
<Text size="small" color="color.text.subtlest">
appearance="primary"
</Text>
</Stack>
</Stack>
);
};
export default BadgeNewInformationExample;Inverse
Use inverse when high contrast against a darker background color is needed.
New: appearance="inverse" Legacy: appearance="primaryInverted"
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewInverseExample = (): React.JSX.Element => {
return (
<Box backgroundColor="color.background.brand.bold" padding="space.200">
<Stack space="space.100">
<Stack space="space.050" alignInline="center">
<Badge appearance="inverse">{12}</Badge>
<Text size="small" color="color.text.inverse">
appearance="inverse"
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="primaryInverted">{12}</Badge>
<Text size="small" color="color.text.inverse">
appearance="primaryInverted"
</Text>
</Stack>
</Stack>
</Box>
);
};
export default BadgeNewInverseExample;Success
Use success to show positive values or additions. For example, when characters are added to a line
of code in Bitbucket, or when displaying growth metrics.
New: appearance="success" Legacy: appearance="added"
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewSuccessExample = (): React.JSX.Element => {
return (
<Stack space="space.100">
<Stack space="space.050" alignInline="center">
<Badge appearance="success">+100</Badge>
<Text size="small" color="color.text.subtlest">
appearance="success"
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="added">+100</Badge>
<Text size="small" color="color.text.subtlest">
appearance="added"
</Text>
</Stack>
</Stack>
);
};
export default BadgeNewSuccessExample;Danger
Use danger to show negative values, removals, or critical information. For example, when
characters are removed from a line of code in Bitbucket, or when displaying critical counts.
New: appearance="danger" Legacy: appearance="removed"
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewDangerExample = (): React.JSX.Element => {
return (
<Stack space="space.100">
<Stack space="space.050" alignInline="center">
<Badge appearance="danger">-50</Badge>
<Text size="small" color="color.text.subtlest">
appearance="danger"
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="removed">-50</Badge>
<Text size="small" color="color.text.subtlest">
appearance="removed"
</Text>
</Stack>
</Stack>
);
};
export default BadgeNewDangerExample;Warning
Use warning to call attention to information that requires caution or awareness, such as pending
actions or items requiring attention.
New: appearance="warning" (no direct legacy equivalent - would render as default with feature
flag off)
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewWarningExample = (): React.JSX.Element => {
return (
<Stack space="space.050" alignInline="center">
<Badge appearance="warning">{5}</Badge>
<Text size="small" color="color.text.subtlest">
appearance="warning"
</Text>
</Stack>
);
};
export default BadgeNewWarningExample;Discovery
Use discovery to highlight new features, discoveries, or exploratory information.
New: appearance="discovery" (no direct legacy equivalent - would render as default with
feature flag off)
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewDiscoveryExample = (): React.JSX.Element => {
return (
<Stack space="space.050" alignInline="center">
<Badge appearance="discovery">{3}</Badge>
<Text size="small" color="color.text.subtlest">
appearance="discovery"
</Text>
</Stack>
);
};
export default BadgeNewDiscoveryExample;Bold appearances
Bold semantic appearances provide higher visual prominence and should be reserved for badges of high
importance, such as notification counts. Five bold appearances are available: informationBold,
successBold, dangerBold, warningBold, and discoveryBold.
import React from 'react';
import Badge from '@atlaskit/badge/badge';
import { Inline, Stack, Text } from '@atlaskit/primitives/compiled';
const BadgeNewBoldExample = (): React.JSX.Element => {
return (
<Inline space="space.200" alignBlock="start">
<Stack space="space.050" alignInline="center">
<Badge appearance="informationBold">8</Badge>
<Text size="small" color="color.text.subtlest">
informationBold
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="successBold">8</Badge>
<Text size="small" color="color.text.subtlest">
successBold
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="dangerBold">8</Badge>
<Text size="small" color="color.text.subtlest">
dangerBold
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="warningBold">8</Badge>
<Text size="small" color="color.text.subtlest">
warningBold
</Text>
</Stack>
<Stack space="space.050" alignInline="center">
<Badge appearance="discoveryBold">8</Badge>
<Text size="small" color="color.text.subtlest">
discoveryBold
</Text>
</Stack>
</Inline>
);
};
export default BadgeNewBoldExample;Max value
Capped number values
Use the max prop to cap the value of a badge. When the value to display is greater than the max
prop, a + will be appended. The default max value is 99.
import React from 'react';
import Badge from '@atlaskit/badge/badge';
const BadgeNewMaxValueExample = (): React.JSX.Element => {
return <Badge max={99}>{500}</Badge>;
};
export default BadgeNewMaxValueExample;Unlimited values
Set the max prop to false to display the value as provided, without a plus symbol (+)
appended.
import React from 'react';
import Badge from '@atlaskit/badge/badge';
const BadgeNewMaxValueDisabledExample = (): React.JSX.Element => {
return <Badge max={false}>{5000}</Badge>;
};
export default BadgeNewMaxValueDisabledExample;