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
Name | Type | Default | Description | Required? |
---|---|---|---|---|
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>