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, and this page is available as Markdown at https://wallarm.github.io/design-system/components/indicator.md.

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 ยท Storybook

Usage

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.

Props

PropTypeDefaultDescription
defaultCheckedboolean | undefined
defaultValuestring | number | readonly string[] | undefined
autoFocusboolean | undefined
idstring | undefined
tabIndexnumber | undefined
titlestring | undefined
relstring | undefined
colorstring | undefinedinfo
onChangeChangeEventHandler<T, Element> | undefined
size{ sm: string; md: string; }sm
data-testidstring | undefined