Badge

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 { Badge } from '@pillar-ui/core'
Go To badge Source CodeIssuesdiscussions

Usage

import { Badge } from '@pillar-ui/core'
<Badge />

Examples

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
15
15
15
15
15
15
15
import { Badge, Flex } from '@pillar-ui/core'
import { Check } from '@pillar-ui/icons'

export const BadgeColor = () => {
  return (
    <>
      <Flex gap="4">
        <Badge type="numeric" number={15} max={15} color="d" />
        <Badge type="numeric" number={15} max={15} color="su" />
        <Badge type="numeric" number={15} max={15} color="w" />
        <Badge type="numeric" number={15} max={15} color="p" />
        <Badge type="numeric" number={15} max={15} color="se" />
        <Badge type="numeric" number={15} max={15} color="b" />
        <Badge type="numeric" number={15} max={15} color="i" />
      </Flex>
      <Flex gap="4">
        <Badge type="icon" color="d" icon={<Check />} />
        <Badge type="icon" color="su" icon={<Check />} />
        <Badge type="icon" color="w" icon={<Check />} />
        <Badge type="icon" color="p" icon={<Check />} />
        <Badge type="icon" color="se" icon={<Check />} />
        <Badge type="icon" color="b" icon={<Check />} />
        <Badge type="icon" color="i" icon={<Check />} />
      </Flex>
      <Flex gap="4">
        <Badge type="dot" color="d" />
        <Badge type="dot" color="su" />
        <Badge type="dot" color="w" />
        <Badge type="dot" color="p" />
        <Badge type="dot" color="se" />
        <Badge type="dot" color="b" />
        <Badge type="dot" color="i" />
      </Flex>
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
15
15
15
15
15
15
15
15
15
import { Badge, Flex } from '@pillar-ui/core'
import { Check } from '@pillar-ui/icons'

export const BadgeSize = () => {
  return (
    <>
      <Flex items="center" gap="4">
        <Badge size="1" type="numeric" number={15} />
        <Badge size="2" type="numeric" number={15} />
        <Badge size="3" type="numeric" number={15} />
        <Badge size="4" type="numeric" number={15} />
        <Badge size="5" type="numeric" number={15} />
        <Badge size="6" type="numeric" number={15} />
        <Badge size="7" type="numeric" number={15} />
        <Badge size="8" type="numeric" number={15} />
        <Badge size="9" type="numeric" number={15} />
      </Flex>
      <Flex items="center" gap="4">
        <Badge size="1" type="icon" icon={<Check />} />
        <Badge size="2" type="icon" icon={<Check />} />
        <Badge size="3" type="icon" icon={<Check />} />
        <Badge size="4" type="icon" icon={<Check />} />
        <Badge size="5" type="icon" icon={<Check />} />
        <Badge size="6" type="icon" icon={<Check />} />
        <Badge size="7" type="icon" icon={<Check />} />
        <Badge size="8" type="icon" icon={<Check />} />
        <Badge size="9" type="icon" icon={<Check />} />
      </Flex>
      <Flex items="center" gap="4">
        <Badge size="1" type="dot" />
        <Badge size="2" type="dot" />
        <Badge size="3" type="dot" />
        <Badge size="4" type="dot" />
        <Badge size="5" type="dot" />
        <Badge size="6" type="dot" />
        <Badge size="7" type="dot" />
        <Badge size="8" type="dot" />
        <Badge size="9" type="dot" />
      </Flex>
    </>
  )
}

Corner

Default

full

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'
15
15
15
15
15
15
15
15
import { Badge, Flex } from '@pillar-ui/core'
import { Alien, Apple, Check, ChevronDown, LetterSpacing, Plane, Plus } from '@pillar-ui/icons'

export const BadgeCorner = () => {
  return (
    <>
      <Flex gap="4">
        <Badge type="numeric" corner="0" number={15} max={15} />
        <Badge type="numeric" corner="1" number={15} max={15} />
        <Badge type="numeric" corner="2" number={15} max={15} />
        <Badge type="numeric" corner="3" number={15} max={15} />
        <Badge type="numeric" corner="4" number={15} max={15} />
        <Badge type="numeric" corner="5" number={15} max={15} />
        <Badge type="numeric" corner="circle" number={15} max={15} />
        <Badge type="numeric" corner="full" number={15} max={15} />
      </Flex>
      <Flex gap="4">
        <Badge type="icon" icon={<Check />} corner="0" />
        <Badge type="icon" icon={<Plus />} corner="1" />
        <Badge type="icon" icon={<Plane />} corner="2" />
        <Badge type="icon" icon={<Apple />} corner="3" />
        <Badge type="icon" icon={<Alien />} corner="4" />
        <Badge type="icon" icon={<Alien />} corner="5" />
        <Badge type="icon" icon={<ChevronDown />} corner="circle" />
        <Badge type="icon" icon={<LetterSpacing />} corner="full" />
      </Flex>
      <Flex gap="4">
        <Badge type="dot" corner="0" />
        <Badge type="dot" corner="1" />
        <Badge type="dot" corner="2" />
        <Badge type="dot" corner="3" />
        <Badge type="dot" corner="4" />
        <Badge type="dot" corner="5" />
        <Badge type="dot" corner="circle" />
        <Badge type="dot" corner="full" />
      </Flex>
    </>
  )
}

Variants

Default

solid

Type

'shadow' | 'solid' | 'outline' | 'soft' | 'mixed'
15
15
15
15
15
import { Badge, Flex } from '@pillar-ui/core'
import { Check } from '@pillar-ui/icons'

export const BadgeVariant = () => {
  return (
    <>
      <Flex gap="3" items="center">
        <Badge variant="shadow" type="dot" color="d" />
        <Badge variant="shadow" type="numeric" number={15} max={15} color="d" />
        <Badge variant="shadow" type="icon" icon={<Check />} color="d" />
      </Flex>
      <Flex gap="3" items="center">
        <Badge type="dot" variant="solid" color="d" />
        <Badge type="numeric" variant="solid" number={15} max={15} color="d" />
        <Badge type="icon" variant="solid" icon={<Check />} color="d" />
      </Flex>

      <Flex gap="3" items="center">
        <Badge type="dot" variant="mixed" color="d" />
        <Badge type="numeric" variant="mixed" number={15} max={15} color="d" />
        <Badge type="icon" variant="mixed" icon={<Check />} color="d" />
      </Flex>
      <Flex gap="3" items="center">
        <Badge variant="soft" type="dot" color="d" />
        <Badge variant="soft" type="numeric" number={15} max={15} color="d" />
        <Badge variant="soft" type="icon" icon={<Check />} color="d" />
      </Flex>
      <Flex gap="3" items="center">
        <Badge variant="outline" type="dot" color="d" />
        <Badge variant="outline" type="numeric" number={15} max={15} color="d" />
        <Badge variant="outline" type="icon" icon={<Check />} color="d" />
      </Flex>
    </>
  )
}

Types

Default

numeric

Type

'numeric' | 'icon' | 'dot'
15
import { Badge, Flex } from '@pillar-ui/core'
import { Check } from '@pillar-ui/icons'

export const BadgeType = () => {
  return (
    <Flex items="center" gap="4">
      <Badge type="numeric" number={15} />
      <Badge type="icon" icon={<Check />} />
      <Badge type="dot" />
    </Flex>
  )
}

Number

15
100000
import { Badge } from '@pillar-ui/core'

export const BadgeNumeric = () => {
  return (
    <>
      <Badge type="numeric" number={15} />
      <Badge type="numeric" number={100000} />
      <Badge type="numeric" number={0} />
    </>
  )
}

ShowZero

By default, badges with a value of zero are hidden. Set the showZero prop to true to display them.

Default

false

Type

boolean
0
import { Badge } from '@pillar-ui/core'

export const BadgeShowZero = () => {
  return (
    <>
      <Badge type="numeric" number={0} />
      <Badge type="numeric" showZero number={0} />
    </>
  )
}

Max

20
10
15
20+
import { Badge, Flex } from '@pillar-ui/core'

export const BadgeMax = () => {
  return (
    <Flex gap="4">
      <Badge type="numeric" number={20} />
      <Badge type="numeric" number={10} max={10} />
      <Badge type="numeric" number={15} max={20} />
      <Badge type="numeric" number={40} max={20} />
    </Flex>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Badge */
--badge-rad:;
/* Change the default size of the Badge */
--badge-size:;

previous

Avatar

next

Blockquote