# Badge
## Package to install from 
```bash
npm install @trackunit/react-components
```
Latest version: 2.10.9

## Description
```md
For component Badge the jsdoc description is:
Badge displays a numeric count or a small colored dot to indicate notifications or applied elements.
It is typically placed on buttons, tabs, or filters to draw attention to new or pending items.

### When to use
Use Badge to indicate a count (e.g., unread notifications, active filters) or as a compact status dot.

### When not to use
Do not use Badge for labeling statuses or categories — use `Tag` instead.
Do not use Badge for highlighting data values — use `Highlight`.

How to choose between Badge and `Tag`?
- Use a Badge to indicate notifications or counts of applied elements.
- Use a `Tag` for labeling statuses, categories, or selections.
```


# React Component props for Badge

| Name | Type | Description | Required | DefaultValue |
| -------- | ------- | ------- | ------- | ------- |
| className | string | Custom classNames can be added to make adjustments where needed.
Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
This will make the badge truncate the text if it is too long. | false |  |
| color | "warning" \| "danger" \| "primary" \| "neutral" | The color of the badge. | false | primary |
| compact | boolean | If true the badge is displayed as a small colored dot with no content | false | false |
| count | number | The count to be displayed on the badge. | false |  |
| data-testid | string | A id that can be used in tests to get the component | false |  |
| hideZero | boolean | If enabled the badge is shown even if the count is 0. | false | false |
| max | number | The max value to be displayed in the badge.
Any value above this will be appended with a +. | false |  |
| ref | null \| (instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly) \| RefObject<HTMLSpanElement \| null> | Ref forwarded to the root DOM element | false |  |
| size | "default" \| "condensed" | The size of the badge. | false | default |
| style | CSSProperties |  | false |  |

# Examples
```
import { Badge } from "@trackunit/react-components";
```

Badge with count and max — Use `count` and `max` to show a capped notification count. Values above `max` display as "9+".
```tsx
import { Badge, Button } from "@trackunit/react-components";

const NotificationButton = () => (
<Button variant="secondary">
Notifications <Badge count={15} max={9} color="danger" />
</Button>
);
```
Compact status dot — Set `compact` to render a small colored dot without any count, useful for online/offline indicators.
```tsx
import { Badge } from "@trackunit/react-components";

const OnlineStatus = () => (
<div className="flex items-center gap-2">
<Badge compact color="primary" />
<span>Online</span>
</div>
);
```  

## Colors
```typescript
    <div className="grid grid-cols-[repeat(auto-fill,_minmax(50px,1fr))] gap-4">
      <Badge color="primary" count={42} />
      <Badge color="warning" count={42} />
      <Badge color="danger" count={42} />
      <Badge color="neutral" count={42} />
    </div>
```

## DifferentSizes
```typescript
    <div className="grid grid-cols-7 gap-4 text-xs">
      <div className="grid-rows-subgrid row-start-1 row-end-3 grid items-center gap-2 text-center">
        <div className="flex items-center justify-center">
          <Badge color="primary" compact count={420} />
        </div>
        <span>Compact badge</span>
      </div>

      <div className="grid-rows-subgrid row-start-1 row-end-3 grid items-center gap-2 text-center">
        <div className="flex items-center justify-center">
          <Badge color="primary" count={0} />
        </div>
        <span>Zero count</span>
      </div>
      <div className="grid-rows-subgrid row-start-1 row-end-3 grid items-center gap-2 text-center">
        <div className="flex items-center justify-center">
          <Badge color="primary" count={420} />
        </div>
        <span>Regular count</span>
      </div>
      <div className="grid-rows-subgrid row-start-1 row-end-3 grid items-center gap-2 text-center">
        <div className="flex items-center justify-center">
          <Badge color="primary" count={420} max={399} />
        </div>
        <span>With max value</span>
      </div>
      <div className="grid-rows-subgrid row-start-1 row-end-3 grid items-center gap-2 text-center">
        <div className="flex items-center justify-center">
          <Badge color="primary" />
        </div>
        <span>No count</span>
      </div>
      <div className="grid-rows-subgrid row-start-1 row-end-4 grid items-center gap-2 text-center">
        <div className="flex items-center justify-center">
          <Badge color="primary" count={0} hideZero />
        </div>
        <span>Hidden zero</span>
        <p className="text-center">^ Hidden badge due to hideZero prop. Click "show code" to see the implementation.</p>
      </div>
    </div>
```

## SizeVariants
```typescript
    <div className="flex items-center gap-4">
      <div className="flex flex-col items-center gap-2">
        <Badge color="primary" count={42} size="default" />
        <span className="text-xs">Default</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Badge color="primary" count={42} size="condensed" />
        <span className="text-xs">Condensed</span>
      </div>
    </div>
```

## CorrectColorTemplate
```typescript
    <Badge color="primary" count={42} />
```

## IncorrectColorTemplate
```typescript
    <Badge color="danger" count={42} />
```