Welcome UI - Badge

import { Badge } from 'welcome-ui/Badge'

const Example = () => {
  return (
    <>
      <Badge size="sm" variant="brand" />
      <Badge variant="neutral">New</Badge>
      <Badge size="lg">{1}</Badge>
    </>
  )
}

export default Example

Examples

Sizes

Use size property with sm, md (default), or lg. For status indicators or notification information you can use sm size.

Variants

Use variant property with brand, blue, neutral, or warm (default)

withNumberAbbreviation

If a number is higher than 99, we replace this number by 99+, simply add property withNumberAbbreviation. The children need to be a number!