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