> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# NumericBadge

A compact count, `!` / `?` glyph, or icon attached to a tab, button, menu item, or step.

`type` sets the visual weight and `color` sets the meaning. Supported combinations:

- `solid`: `brand`, `danger`
- `secondary`: `neutral`, `neutral-alt`, `info`, `success`, `danger`, `brand`
- `outline`: `neutral`, `success`, `danger`, `brand`

The default is `secondary` / `neutral`. With `type="solid"`, the default color is `brand`.

`size="default"` corresponds to Medium (20px tall, 16px icon); `size="small"` is 16px tall with a 12px icon. Pass content as children and give an icon-only badge an accessible name when it conveys meaning.

Hover and focus states apply to clickable badges. Use `asChild` with a native button or link when the badge is an action or navigation target.

Migration from the removed flat `type` API:

| Previous type | New type    | New color     |
| ------------- | ----------- | ------------- |
| `primary`     | `secondary` | `neutral`     |
| `primary-alt` | `secondary` | `neutral-alt` |
| `brand`       | `solid`     | `brand`       |
| `destructive` | `solid`     | `danger`      |
| `outline`     | `outline`   | `neutral`     |
| `info`        | `secondary` | `info`        |

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/NumericBadge) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/status-indication-numericbadge--overview)

```tsx
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';

export const Basic = () => <NumericBadge>1</NumericBadge>;
```

## Usage

```tsx
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
```

## Examples

### Sizes

Two heights, chosen to sit inside the control they are attached to rather than beside it.

```tsx
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  // One row per size, each holding its own label: parallel columns drift apart as soon as the
  // label and the specimen have different heights.
  <VStack gap={8} align='start'>
    {(['small', 'default'] as const).map(size => (
      <HStack key={size} gap={12} align='center'>
        <NumericBadge size={size}>1</NumericBadge>
      </HStack>
    ))}
  </VStack>
);
```

### Types

Every supported Type × Color combination, in Medium and Small.

```tsx
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Types = () => (
  // One row per type, so the label always sits beside the badges it names.
  <VStack gap={8} align='start'>
    {combinations.map(({ type, color }) => (
      <HStack key={`${type}-${color}`} gap={12} align='center'>
        <div
          className={`inline-flex items-center gap-12 p-8 ${color === 'neutral-alt' ? 'bg-component-tooltip-bg' : ''}`}
        >
          <NumericBadge type={type} color={color} size='default'>
            1
          </NumericBadge>
          <NumericBadge type={type} color={color} size='small'>
            1
          </NumericBadge>
        </div>
      </HStack>
    ))}
  </VStack>
);
```

### Content

Numbers, short glyphs, and icons share the same badge heights.

```tsx
import { Check } from '@wallarm-org/design-system/icons';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Content = () => (
  <VStack gap={16} align='start'>
    {(['default', 'small'] as const).map(size => (
      <HStack key={size} gap={12} align='center'>
        <NumericBadge data-testid='numeric-badge' size={size}>
          1
        </NumericBadge>
        <NumericBadge data-testid='numeric-badge' size={size}>
          99
        </NumericBadge>
        <NumericBadge
          data-testid='numeric-badge'
          size={size}
          color='danger'
          aria-label='Needs attention'
        >
          !
        </NumericBadge>
        <NumericBadge data-testid='numeric-badge' size={size} color='info' aria-label='Unknown'>
          ?
        </NumericBadge>
        <NumericBadge
          data-testid='numeric-badge'
          size={size}
          color='success'
          aria-label='Completed'
        >
          <Check />
        </NumericBadge>
      </HStack>
    ))}
  </VStack>
);
```

### Clickable

Use a native button for an action; Tab, Enter, and Space work as expected.

```tsx
import { useState } from 'react';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Clickable = () => {
  const [activations, setActivations] = useState(0);
  return (
    <VStack gap={12} align='start'>
      {combinations.map(({ type, color }) => (
        <HStack key={`${type}-${color}`} gap={12} align='center'>
          <div className={color === 'neutral-alt' ? 'bg-component-tooltip-bg p-8' : 'p-8'}>
            <NumericBadge
              asChild
              type={type}
              color={color}
              onClick={() => setActivations(count => count + 1)}
            >
              <button type='button' aria-label={`${type} ${color}`}>
                1
              </button>
            </NumericBadge>
          </div>
        </HStack>
      ))}
      <output aria-label='Activations'>{activations}</output>
    </VStack>
  );
};
```

## Props

| Prop           | Type                                                                                                        | Default                                 | Description                                                                |
| -------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------- |
| title          | `string \| undefined`                                                                                       |                                         |                                                                            |
| defaultChecked | `boolean \| undefined`                                                                                      |                                         |                                                                            |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                                                        |                                         |                                                                            |
| autoFocus      | `boolean \| undefined`                                                                                      |                                         |                                                                            |
| id             | `string \| undefined`                                                                                       |                                         |                                                                            |
| tabIndex       | `number \| undefined`                                                                                       |                                         |                                                                            |
| rel            | `string \| undefined`                                                                                       |                                         |                                                                            |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                                                               |                                         |                                                                            |
| color          | `{ neutral: string; 'neutral-alt': string; brand: string; danger: string; success: string; info: string; }` | `type === 'solid' ? 'brand' : 'neutral` |                                                                            |
| type           | `{ solid: string; secondary: string; outline: string; }`                                                    | `secondary`                             |                                                                            |
| size           | `{ default: string; small: string; }`                                                                       | `default`                               |                                                                            |
| data-testid    | `string \| undefined`                                                                                       |                                         |                                                                            |
| asChild        | `boolean \| undefined`                                                                                      | `false`                                 | Applies the badge to its child element, such as a span or a native button. |
| data-slot      | `string \| undefined`                                                                                       |                                         |                                                                            |