WUI logo

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@welcome-ui/badge
OverviewProps
import * as React from 'react'
import { Badge } from '@welcome-ui/badge'


const Example = () => {
  return (
    <>
      <Badge>{1}</Badge>
      <Badge>New</Badge>
      <Badge shape="square" variant="primary">
        1
      </Badge>
      <Badge shape="square" variant="primary">
        New
      </Badge>
    </>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/badge
2

Import component:

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

Examples

Sizes

Use size property with sm or md (default)

Variants

Use variant property with default (default) or primary

Disabled

Use disabled property

Shape

Use shape property with circle (default) or square

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!

Variant can be default (default) or primary

AvatarCard