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.ReactNode`
`size`	`"small"` `"large"` `"default"`	`"small"`	Size default is deprecated in favor of small and large
`badgeColor`	`green` `blue` `purple` `yellow` `orange` `red` `neutral` `magenta` `pink` `aqua` `teal`	`"blue"`
`iconName`	`TypeIconName`

Recipes

"New" badge

import { Badge } from '@sproutsocial/racine'

<Box display='flex' justifyContent="center" width='100%' >
  <Badge badgeColor="purple">
    <Icon size="mini" name="sparkle" />
    <Text ml={200} fontWeight="bold">New</Text>
  </Badge>
</Box>

The purpose of the "New" badge is to quickly draw users' attention to newly introduced features, help them easily identify updates, and encourage exploration of the latest additions within the product. The duration of these badges needs to be short enough to allow for new features to come in and long enough to ensure they are to be seen.

If possible: Disappear after clicking in to see the new feature and/or disappear after being presented 3 times without being pressed
15 Days Maximum for High Traffic Areas (Inbox, Reporting, etc)
30 Days Maximum for Low Traffic Areas (Billing, Roles, etc)

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>