Badge

Use Badge to visually connect logos, brands and images. By default, a Badge is circular, however, you can adjust the radius if needed, or fancied.

Default example

<CircleBadge>
  <Octicon icon={Zap} />
</CircleBadge>

Different badge types

Badge is configurable to adjust the background color too by way of the badge prop.

<Flex
    my={3}
    flexWrap={{
        sm: 'wrap',
        md: 'wrap',
        lg: 'initial'
    }}
    flexDirection={{
        sm: 'column',
        md: 'initial'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <CircleBadge my={3} size='medium' badge='disabled'>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size='medium' badge='success'>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size={'medium'} badge='error'>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size={'medium'} badge='warning'>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size={'medium'} badge='pending'>
      <Octicon icon={Zap} />
    </CircleBadge>
</Flex>

Various box-shadow and badge sizes, and radii

Badge's are intentionally limited to 24x24 pixels and larger

<Flex
    my={3}
    flexWrap={{
        sm: 'wrap',
        md: 'wrap',
        lg: 'initial'
    }}
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'initial'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <CircleBadge my={3} size='small'>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size='large' shadow='large'>
      <Octicon size='large' icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size={12} badge='purple'>
      <Octicon icon={Zap} />
    </CircleBadge>
</Flex>
<Flex
    my={3}
    flexWrap={{
        sm: 'wrap',
        md: 'wrap',
        lg: 'initial'
    }}
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'initial'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <CircleBadge my={3} badge='success' size='small' shadow='small' radius={1}>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size='large' radius='none'>
      <Octicon size='large' icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size={72} radius={6} bg='yellow.4'>
      <Octicon icon={Zap} />
    </CircleBadge>
</Flex>
<Flex
    my={3}
    flexWrap={{
        sm: 'wrap',
        md: 'wrap',
        lg: 'initial'
    }}
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'initial'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <CircleBadge my={3} badge='disabled' size='small' radius={1}>
      <Octicon icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} bg='red.5' color='white' size='large' radius='round'>
      <Octicon size='large' icon={Zap} />
    </CircleBadge>
    <CircleBadge my={3} size={72} radius={6}>
      <Octicon icon={Zap} />
    </CircleBadge>
</Flex>
<Text is='p'>Badge's are intentionally limited to 24x24 pixels and larger</Text>

System props

CircleBadge components get BACKGROUND, BORDER, COMMON and LAYOUT system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
isStringdivsets the HTML tag for the component
sizeString or NumberUse small, medium, or large for default sizes, or provide a custom size
badgeStringsets the badge to a pre-defined variant, e.g. disabled, error, pending, success, warning
radiusString or Numbersets the badge radius to a pre-defined variant, e.g. none, round, square, 1, 2, 3, ...
shadowStringsets the badge box-shadow to a pre-defined elevation size, e.g. small, medium, or large