Status
Метка состояния с цветным маркером и текстовой подписью. Маркер — цветная точка, спиннер (loading) или круговой прогресс-бар (progress).
Демо
Prop
Type
Value
appearanceneutral | red | orange | yellow | green | blue | violet | pink
backgroundboolean
data-test-idtext
labeltext
loadingboolean
sizexs | s
Code
<Status appearance="green" background={false} loading={false} size="xs" label="Active" />Когда использовать
- Статус записи в списке / таблице: «Active», «Suspended», «Pending».
- Состояние асинхронной операции со спиннером (
loading). - Отображение прогресса обработки (
progress=0..100) в компактном виде.
Когда не нужен: динамический чип с удалением — берите Chip/Tag. Промо-метка без функциональной семантики — берите PromoTag.
Анатомия
Size
xs — для плотных таблиц и инлайновых меток, s — дефолт в карточках и заголовках.
Appearance
Семантический цвет: neutral — нейтральный, green — успех/активно, red — ошибка/критично, orange/yellow — предупреждение, blue — информация, violet/pink — декоративные.
Установка
pnpm add @cloud-ru/ds-statusimport { Status } from '@cloud-ru/ds-status'Примеры использования
Активный статус
tsx
import { Status } from '@cloud-ru/ds-status';
export function Active() {
return <Status label='Active' appearance='green' />;
}Loading
tsx
import { Status } from '@cloud-ru/ds-status';
export function Loading() {
return <Status label='Processing' loading />;
}С фоном
tsx
import { Status } from '@cloud-ru/ds-status';
export function WithBackground() {
return <Status label='Error' appearance='red' background />;
}Props
Types
Props
StatusProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
appearance | "blue" | "green" | "neutral" | "orange" | "pink" | "red" | "violet" | "yellow" | neutral | no | Внешний вид (цветовая схема) |
background | boolean | false | no | Наличие фона |
className | string | — | no | CSS-класс |
data-test-id | string | — | no | |
innerRef | Ref<HTMLDivElement> | — | no | Ref на корневой DOM-элемент. Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт. |
label | string | — | yes | Подпись к индикатору (точка с текстом). Если не передано — только точка |
loading | boolean | false | no | Состояние загрузки |
progress | number | — | no | Прогресс загрузки (от 0 до 100) |
size | "s" | "xs" | s | no | Размер индикатора и подписи |