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.

import * as React from 'react'
import { Badge } from 'welcome-ui/Badge'
const Example = () => {
return (
<>
<Badge>{1}</Badge>
<Badge variant="primary">New</Badge>
</>
)
}
export default Example

Sizes

Use size property with sm or md (default)

Variants

Use variant property with default (default) or primary

Disabled

Use disabled property

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