Status

@cloud-ru/ds-status — Пакет статус-индикаторов — компоненты Status (подпись + маркер) и StatusIndicator (только маркер). Цветовая семантика состояний и поддержка loading/progress.

Пакет @cloud-ru/ds-status содержит два компонента для отображения состояния сущности:

• Status — подпись с цветным маркером. Маркер может быть точкой, спиннером (loading) или круговым прогресс-баром (progress).
• StatusIndicator — только маркер-точка без текста: для мест, где подпись избыточна (иконка в таблице, badge на иконке).

Установка

pnpm add @cloud-ru/ds-status

import { Status, StatusIndicator } from '@cloud-ru/ds-status'

Status

Цветная метка состояния с подписью и маркером. Поддерживает loading-спиннер и progress-прогрессбар вместо точки.

Метка состояния с цветным маркером и текстовой подписью. Маркер — цветная точка, спиннер (loading) или круговой прогресс-бар (progress).

Когда использовать

• Статус записи в списке / таблице: «Active», «Suspended», «Pending».
• Состояние асинхронной операции со спиннером (loading).
• Отображение прогресса обработки (progress=0..100) в компактном виде.

Когда не нужен: динамический чип с удалением — берите Chip/Tag. Промо-метка без функциональной семантики — берите PromoTag.

Анатомия

Size

xs — для плотных таблиц и инлайновых меток, s — дефолт в карточках и заголовках.

Appearance

Семантический цвет: neutral — нейтральный, green — успех/активно, red — ошибка/критично, orange/yellow — предупреждение, blue — информация, violet/pink — декоративные.

Примеры использования

Активный статус

import { Status } from '@cloud-ru/ds-status';

export function Active() {
  return <Status label='Active' appearance='green' />;
}

Loading

Спиннер вместо точки, appearance принудительно neutral.

import { Status } from '@cloud-ru/ds-status';

export function Loading() {
  return <Status label='Processing' loading />;
}

С фоном

background — визуально выделяет строку.

import { Status } from '@cloud-ru/ds-status';

export function WithBackground() {
  return <Status label='Error' appearance='red' background />;
}

Props

StatusProps

Related types

• Appearance = "blue" | "green" | "neutral" | "orange" | "pink" | "red" | "violet" | "yellow"

• StatusSize = "s" | "xs"

StatusIndicator

Цветной маркер-точка без подписи — для мест, где текст избыточен (иконка в таблице, badge на аватаре).

Минимальный маркер-точка без подписи. Пять размеров (4xs → s) и восемь цветовых схем. Используется, когда пространства для текста нет — колонка таблицы, badge на иконке, inline-маркер в списке.

Когда использовать

• Колонка «Статус» в плотной таблице — только цветная точка.
• Badge-индикатор на аватаре или иконке (онлайн, новое событие).
• Inline-маркер перед текстом в самописных лейаутах.

Когда не нужен: если пользователю нужно прочитать статус — берите Status с подписью. Цвет без текста недоступен дальтоникам и скринридерам.

Анатомия

Size

Набор размеров от 4xs (точка в плотных списках) до s (в заголовках): 4xs, 3xs, 2xs, xs, s.

Appearance

Семантический цвет индикатора: neutral, green (успех), red (ошибка), orange/yellow (предупреждение), blue (инфо), violet/pink (декоративные).

Примеры использования

Базовый индикатор

import { StatusIndicator } from '@cloud-ru/ds-status';

export function BasicIndicator() {
  return <StatusIndicator size='xs' appearance='green' />;
}

Props

StatusIndicatorProps

Related types

• Appearance = "blue" | "green" | "neutral" | "orange" | "pink" | "red" | "violet" | "yellow"

• StatusIndicatorSize = "2xs" | "3xs" | "4xs" | "s" | "xs"