StatusIndicator
Минимальный маркер-точка без подписи. Пять размеров (4xs → s) и восемь цветовых схем. Используется, когда пространства для текста нет — колонка таблицы, badge на иконке, inline-маркер в списке.
Демо
Prop
Type
Value
appearanceneutral | red | orange | yellow | green | blue | violet | pink
data-test-idtext
size4xs | 3xs | 2xs | xs | s
Code
<StatusIndicator appearance="green" size="s" />Когда использовать
- Колонка «Статус» в плотной таблице — только цветная точка.
- Badge-индикатор на аватаре или иконке (онлайн, новое событие).
- Inline-маркер перед текстом в самописных лейаутах.
Когда не нужен: если пользователю нужно прочитать статус — берите Status с подписью. Цвет без текста недоступен дальтоникам и скринридерам.
Анатомия
Size
Набор размеров от 4xs (точка в плотных списках) до s (в заголовках): 4xs, 3xs, 2xs, xs, s.
Appearance
Семантический цвет индикатора: neutral, green (успех), red (ошибка), orange/yellow (предупреждение), blue (инфо), violet/pink (декоративные).
Установка
pnpm add @cloud-ru/ds-statusimport { StatusIndicator } from '@cloud-ru/ds-status'Примеры использования
Базовый индикатор
tsx
import { StatusIndicator } from '@cloud-ru/ds-status';
export function BasicIndicator() {
return <StatusIndicator size='xs' appearance='green' />;
}Props
Types
Props
StatusIndicatorProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
appearance | "blue" | "green" | "neutral" | "orange" | "pink" | "red" | "violet" | "yellow" | neutral | no | Внешний вид |
className | string | — | no | |
data-test-id | string | — | no | |
innerRef | Ref<HTMLDivElement> | — | no | Ref на корневой DOM-элемент. Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт. |
size | "2xs" | "3xs" | "4xs" | "s" | "xs" | s | no | Размер |