Badge

The Badge component displays small, supplementary information such as notifications, status indicators, or counts. It helps draw attention to important elements and provides users with context at a glance.

Source

Github

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.

Github

Variants

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

Github

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!

Github

Avatar Card