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

# Indicator

A coloured dot for a state next to something that already names it — a row, a tab, an item in a list. Reach for `Badge` when the state needs naming, since colour on its own carries nothing for a reader who cannot separate the hues.

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

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

export const Basic = () => <Indicator />;
```

## Usage

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

## Examples

### All variants

Both sizes against every colour. The colours mean what they mean everywhere else in the
system, so pick from meaning rather than from contrast.

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

export const AllVariants = () => (
  // Fixed-width cells so each size heading sits over its own column: the dots are 6 and 8px, far
  // narrower than the words above them, so without a shared width nothing lines up.
  <VStack gap={16} align='start'>
    <HStack gap={24} align='center'>
    </HStack>
    {colors.map(color => (
      <HStack key={color} gap={24} align='center'>
        <div className='flex w-32 justify-center'>
          <Indicator size='sm' color={color} />
        </div>
        <div className='flex w-32 justify-center'>
          <Indicator size='md' color={color} />
        </div>
      </HStack>
    ))}
  </VStack>
);
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| color          | `string \| undefined`                                | `info`  |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| size           | `{ sm: string; md: string; }`                        | `sm`    |             |
| data-testid    | `string \| undefined`                                |         |             |