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" />

<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" /> </>

<>
  <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%)" /> </>

<>
  <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 />

<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" /> </>

<>
  <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} />; }

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>

<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"/> </>

<>
  <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

Name	Type	Default
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" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
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.