# 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.

## Overview

```tsx
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.

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

const Example = () => {
  return (
    <>
      <Badge size="sm" />
      <Badge>0</Badge>
      <Badge size="lg">0</Badge>
    </>
  )
}

export default Example
```

### Variants

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

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

const Example = () => {
  return (
    <>
      <Badge variant="brand">brand</Badge>
      <Badge variant="blue">blue</Badge>
      <Badge variant="red">red</Badge>
      <Badge variant="neutral">neutral</Badge>
      <Badge>warm</Badge>
    </>
  )
}

export default Example
```

### 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!_

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

const Example = () => {
  return <Badge withNumberAbbreviation>{100}</Badge>
}

export default Example
```

## Props

### Badge

```tsx
interface BadgeProps {
  /** Default: md */
  size?: 'lg' | 'md' | 'sm'
  /** Default: warm */
  variant?: 'blue' | 'brand' | 'neutral' | 'red' | 'warm'
  withNumberAbbreviation?: boolean
}
```