Badge

Components

Badge

Code

Badge is a decorative indicator used to either call attention to a related item or for communicating non-actionable, supplemental information.

import { Badge } from '@sproutsocial/racine'

<Box display='flex' flexWrap="wrap" width='100%' >
  <Badge mr={300}>Default Badge</Badge>
  <Badge badgeColor="green" mr={300}>Green Badge</Badge>
  <Badge badgeColor="blue" mr={300}>Blue Badge</Badge>
  <Badge badgeColor="purple" mr={300}>Purple Badge</Badge>
  <Badge badgeColor="yellow" mr={300}>Yellow Badge</Badge>
  <Badge badgeColor="orange" mr={300}>Orange Badge</Badge>
  <Badge badgeColor="red" mr={300}>Red Badge</Badge>
  <Badge badgeColor="neutral" mr={300}>Neutral Badge</Badge>
</Box>

Properties

Name	Type	Default	Description
`children`	`React.Node`
`size`	`'small'` `'large'` `'default'`	`'small'`	Size default is deprecated in favor of small and large
`badgeColor`	`'green'` `'blue'` `'purple'` `'yellow'` `'orange'` `'red'` `'neutral'`	`'blue'`
`iconName`	`TypeIconName`

Recipes

With icon

import { Badge } from '@sproutsocial/racine'

<Box display='flex' justifyContent="center" width='100%' >
  <Badge iconName="sparkle-outline">This is a badge with an icon</Badge>
</Box>

With children

import { Badge } from '@sproutsocial/racine'

<Box display='flex' justifyContent="center" width='100%' >
  <Badge>
    <Numeral fontWeight="bold" number={1569241} />
    <Text ml={300}>We are children!</Text>
  </Badge>
</Box>

With legacy props

import { Badge } from '@sproutsocial/racine'

<Box display='flex' justifyContent="center" width='100%' >
  <Badge type="secondary" text="Secondary Badge" size="large" />
</Box>

Override styles

import { Badge } from '@sproutsocial/racine'

<Box display='flex' justifyContent="center" width='100%'>
  <Badge size="large" badgeColor="purple" bg="purple.500" color="neutral.0" iconName="sparkle">This is a badge with an icon</Badge>
</Box>