Skip to main content

Badge

Badges are small indicators which display a small amount of data to categorize, count or communicate status.

Example

Live Editor
<Badge label="Administrator" color="neutral" />
Result
Loading...

Variants

Colors

The Badge component is available in 5 different colors: primary, neutral, negative, positive and warning.

Live Editor
<>
  <Badge label="Administrator" color="primary" />
  <Badge label="Administrator" color="neutral" />
  <Badge label="Administrator" color="negative" />
  <Badge label="Administrator" color="positive" />
  <Badge label="Administrator" color="warning" />
</>
Result
Loading...

Besides, the component provides customColor prop to custom the Badge color and accept following values:

  • HEX color: #65579A
  • RGB color: rgb(25, 128, 56) or rgb(25 128 56)
  • HSL color: hsl(290, 100%, 50%) or hsl(290 100% 50%)

And customColor prop will overwrite color prop.

Live Editor
<>
  <Badge label="HEX Color" customColor="#65579A" />
  <Badge label="RGB Color" customColor="rgb(25, 128, 56)" />
  <Badge iconName="Clock" label="HSL Color" customColor="hsl(290, 100%, 50%)" />
</>
Result
Loading...

Fullwidth

You can use allowFullWidth prop to show more than the default character limit.

Live Editor
<Badge label="Adjust's Atlas design system" color="neutral" allowFullWidth />
Result
Loading...

Icon

All available icons can be found here.

For icon only badge, omit the label prop.

Live Editor
<>
  <Badge iconName="Clock" label="With icon" color="positive" />
  <Badge iconName="Edit" color="positive" aria-label="Edit" />
</>
Result
Loading...

OnClick

You can use onClick prop to run a function when the component is clicked.

Live Editor
function myBadge() {
  const handleClick = () => {
    alert('Badge Clicked!');
  };
  return <Badge label="Clickable" onClick={handleClick} />;
}
Result
Loading...

Tooltip

You can add a Tooltip to the icon only badge to provide a missing label.

Live Editor
<Tooltip content="Peek-a-boo!" id="tooltip-label">
  <Badge iconName="Edit" color="positive" aria-labelledby="tooltip-label" />
</Tooltip>
Result
Loading...

Size

The badge component is available with 3 sizes: small (default), medium and large.

Live Editor
<>
  <Badge iconName="Calendar" label="Small Badge" color="positive" />
  <Badge iconName="Calendar" label="Medium Badge" color="positive" size="medium"/>
  <Badge iconName="Calendar" label="Large Badge" color="positive" size="large"/>
</>
Result
Loading...

Props

NameTypeDefault
label
The label of the Badge
string
color
Color of the Badge
"neutral" | "negative" | "positive" | "warning" | "primary"
"neutral"
customColor
Custom Color of the Badge with HEX, HSL and RGB value
string
size
Size of the Badge
"small" | "medium" | "large"
"small"
iconName
Please refer to the full list of icons here: Link
"AddValue" | "Adjust" | "AIAgent" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown"...
allowFullWidth
A boolean prop for the badge component to have flexible width
boolean
onClick
onClick function to handle clicks
(() => void)
onMouseEnter
Native HTML attribute: Link
MouseEventHandler<HTMLDivElement>
onMouseLeave
Native HTML attribute: Link
MouseEventHandler<HTMLDivElement>
aria-label
Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link
string
aria-labelledby
Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link
string
css
Add custom styles to this component. Use with caution. Learn more here: Link
SupportedStyleAttributes
inputFieldCss
SupportedStyleAttributes
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
* - the prop is required.