Badges can be used for notification, tags, and status. They are used for count and numbers.
import React from 'react' import Badge from 'playbook-ui' const BadgeRounded = (props) => { return ( <div> <Badge rounded text="+1" variant="primary" /> <Badge rounded text="+4" variant="primary" /> <Badge rounded text="+1000" variant="primary" /> </div> ) } export default BadgeRounded
import React from 'react' import Badge from 'playbook-ui' const BadgeColors = (props) => { return ( <div> <div> <Badge rounded text="+1" variant="primary" /> <Badge text="+4" variant="primary" /> <Badge text="+1000" variant="primary" /> </div> <div> <Badge rounded text="+1" variant="success" /> <Badge text="+4" variant="success" /> <Badge text="+1000" variant="success" /> </div> <div> <Badge rounded text="+1" variant="warning" /> <Badge text="+4" variant="warning" /> <Badge text="+1000" variant="warning" /> </div> <div> <Badge rounded text="+1" variant="error" /> <Badge text="+4" variant="error" /> <Badge text="+1000" variant="error" /> </div> <div> <Badge rounded text="+1" variant="info" /> <Badge text="+4" variant="info" /> <Badge text="+1000" variant="info" /> </div> <div> <Badge rounded text="+1" variant="neutral" /> <Badge text="+4" variant="neutral" /> <Badge text="+1000" variant="neutral" /> </div> </div> ) } export default BadgeColors