Components

Badge

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

NameTypeDefaultDescriptionRequired?
childrenReact.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'
iconNameTypeIconName

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="sparkles">This is a badge with an icon</Badge>
</Box>