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
Name | Type | Default |
---|---|---|
label The label of the Badge |
| — |
color Color of the Badge |
| "neutral" |
customColor Custom Color of the Badge with HEX, HSL and RGB value |
| — |
size Size of the Badge |
| "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 |
| — |
onClick onClick function to handle clicks |
| — |
onMouseEnter Native HTML attribute: Link |
| — |
onMouseLeave Native HTML attribute: Link |
| — |
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link |
| — |
aria-labelledby Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link |
| — |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |