Pillar UI React Badge Component documentation
Add visual emphasis to your React applications with Pillar UI's Badge component. Create customizable badges to highlight new features, notifications, user status, or any other relevant information.
Components:
Type
import
import { Pillar UI React Badge Component } from '@pillar-ui/core'
props
Size
- Type: string
- Default:
md
- Options:
2xs
|xs
|sm
|md
|lg
|xl
|2xl
The size prop determines the size of the Badge. It accepts the following values:
export const BadgeSize = () => {
return (
<div className="l_f-md">
<Flex items="center" gap="sm">
<Badge size="3xs" type="numeric" number={15} max={15} />
<Badge size="2xs" type="numeric" number={15} max={15} />
<Badge size="xs" type="numeric" number={15} max={15} />
<Badge size="sm" type="numeric" number={15} max={15} />
<Badge size="md" type="numeric" number={15} max={15} />
<Badge size="lg" type="numeric" number={15} max={15} />
<Badge size="2xl" type="numeric" number={15} max={15} />
<Badge size="3xl" type="numeric" number={15} max={15} />
</Flex>
<Flex items="center" gap="sm">
<Badge size="3xs" type="icon" icon={<Check />} />
<Badge size="2xs" type="icon" icon={<Check />} />
<Badge size="xs" type="icon" icon={<Check />} />
<Badge size="sm" type="icon" icon={<Check />} />
<Badge size="md" type="icon" icon={<Check />} />
<Badge size="lg" type="icon" icon={<Check />} />
<Badge size="2xl" type="icon" icon={<Check />} />
<Badge size="3xl" type="icon" icon={<Check />} />
</Flex>
<Flex items="center" gap="sm">
<Badge size="3xs" type="dot" />
<Badge size="2xs" type="dot" />
<Badge size="xs" type="dot" />
<Badge size="sm" type="dot" />
<Badge size="md" type="dot" />
<Badge size="lg" type="dot" />
<Badge size="2xl" type="dot" />
<Badge size="3xl" type="dot" />
</Flex>
</div>
)
}
Corner
Type: string
Default: md
Options: sharp
| xs
| sm
| md
| lg
| circle
| full
The size prop determines the size of the Alert. It accepts any of the Size types defined in our library see options above. If not provided, it defaults to the md size.
The corner prop determines the border radius of the Badge. It accepts any of the Corner types defined in your library, including (square, xs, sm, md, xl, full, circle), and pill. If not provided, it defaults to the square corner.
export const BadgeSize = () => {
return (
<div className="l_f-md">
<Flex items="center" gap="sm">
<Badge size="3xs" type="numeric" number={15} max={15} />
<Badge size="2xs" type="numeric" number={15} max={15} />
<Badge size="xs" type="numeric" number={15} max={15} />
<Badge size="sm" type="numeric" number={15} max={15} />
<Badge size="md" type="numeric" number={15} max={15} />
<Badge size="lg" type="numeric" number={15} max={15} />
<Badge size="2xl" type="numeric" number={15} max={15} />
<Badge size="3xl" type="numeric" number={15} max={15} />
</Flex>
<Flex items="center" gap="sm">
<Badge size="3xs" type="icon" icon={<Check />} />
<Badge size="2xs" type="icon" icon={<Check />} />
<Badge size="xs" type="icon" icon={<Check />} />
<Badge size="sm" type="icon" icon={<Check />} />
<Badge size="md" type="icon" icon={<Check />} />
<Badge size="lg" type="icon" icon={<Check />} />
<Badge size="2xl" type="icon" icon={<Check />} />
<Badge size="3xl" type="icon" icon={<Check />} />
</Flex>
<Flex items="center" gap="sm">
<Badge size="3xs" type="dot" />
<Badge size="2xs" type="dot" />
<Badge size="xs" type="dot" />
<Badge size="sm" type="dot" />
<Badge size="md" type="dot" />
<Badge size="lg" type="dot" />
<Badge size="2xl" type="dot" />
<Badge size="3xl" type="dot" />
</Flex>
</div>
)
}
Types
The type prop determines the type of Badge to render. It accepts the following values:
- numeric: displays a numeric value.
- icon: displays an icon.
- dot: displays a dot.
export const BadgeTypes = () => {
return (
<div className="l_flow_md">
<Flex gap="sm">
<Badge type="dot" color="dan" />
<Badge type="numeric" number={15} max={15} color="dan" />
<Badge type="icon" icon={<Check />} color="dan" />
</Flex>
</div>
)
}
Variants
Type: string
Default: solid
Options: solid
| mixed
The variants prop determines the style of the Badge.
export const BadgeVariants = () => {
return (
<div className="l_flow_md">
<Flex gap="sm">
<Badge variant="solid" color="dan" />
<Badge variant="mixed" number={15} max={15} color="dan" />
</Flex>
</div>
)
}
Number
The number prop is required for the numeric type. It determines the numeric value to display.
export const BadgeNumericMaxValue = () => {
return (
<Flex gap="sm">
<Badge type="numeric" number={15} color="dan" />
<Badge type="numeric" number={150} color="suc" />
<Badge type="numeric" number={5} color="war" />
<Badge type="numeric" number={0} color="pri" />
<Badge type="numeric" showZero number={0} color="dan" />
<Badge type="numeric" number={12211} color="brown" />
<Badge type="numeric" number={1500} color="purple" />
<Badge type="numeric" number={15} color="sec" />
<Badge type="numeric" number={15} color="bg" />
</Flex>
)
}
Max
The max prop is required for the numeric type. It determines the maximum value that can be displayed. If the number prop is greater than max, the badge will display max+.
export const BadgeNumericMaxValue = () => {
return (
<Flex gap="sm">
<Badge type="numeric" number={15} max={10} color="dan" />
<Badge type="numeric" number={150} max={100} color="suc" />
<Badge type="numeric" number={5} max={0} color="war" />
<Badge type="numeric" number={0} max={15} color="pri" />
<Badge type="numeric" showZero number={0} max={15} color="dan" />
<Badge type="numeric" number={12211} max={10000} color="brown" />
<Badge type="numeric" number={1500} max={100} color="purple" />
<Badge type="numeric" number={15} max={1} color="sec" />
<Badge type="numeric" number={15} max={15} color="bg" />
</Flex>
)
}
Color
Type: Color (string)
Default: primary
Options: danger
| warning
| success
| primary
| secondary
| bg
The color prop determines the color of the Badge. It accepts a string representing a color name or a color value in hex, rgb, rgba format.###
code Example
export const BadgeDotColor = () => {
return (
<Paper className="playground" borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
<Flex gap="sm">
<Badge type="numeric" number={15} max={15} color="dan" />
<Badge type="numeric" number={15} max={15} color="suc" />
<Badge type="numeric" number={15} max={15} color="war" />
<Badge type="numeric" number={15} max={15} color="pri" />
<Badge type="numeric" number={15} max={15} color="sec" />
<Badge type="numeric" number={15} max={15} color="bg" />
</Flex>
<Flex gap="sm">
<Badge type="icon" icon={<Check />} color="dan" />
<Badge type="icon" icon={<Check />} color="suc" />
<Badge type="icon" icon={<Check />} color="war" />
<Badge type="icon" icon={<Check />} color="pri" />
<Badge type="icon" icon={<Check />} color="sec" />
<Badge type="icon" icon={<Check />} color="bg" />
</Flex>
<Flex gap="sm">
<Badge type="dot" color="dan" />
<Badge type="dot" color="suc" />
<Badge type="dot" color="war" />
<Badge type="dot" color="pri" />
<Badge type="dot" color="sec" />
<Badge type="dot" color="bg" />
</Flex>
</Paper>
)
}
Use Case
Badges are often used to highlight important or urgent information, such as unread messages, new notifications, or error messages. They can also be used to display a user's status, such as "online" or "away."
Troubleshooting
Common issues when implementing the Badge component can include incorrect positioning, incorrect styling, or issues with accessibility. Troubleshooting these issues may involve inspecting the HTML and CSS, checking for errors in the code, and testing with different devices and browsers.
Conclusion
The Badge component is a useful UI element for highlighting important or urgent information, and can be implemented using HTML and CSS or with a UI framework or library. When implementing the Badge component, it's important to consider accessibility, TypeScript support, and troubleshooting common issues.