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:

Badge

Type

Components

import

import { Pillar UI React Badge Component } from '@pillar-ui/core'
Go To badge Source CodeIssuesdiscussions

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:

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

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

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

15
150
5
0
12211
1500
15
15
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+.

10+
100+
5
0
10000+
100+
1+
15
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

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