AiToolStatus

Точка-индикатор состояния выполнения шага инструмента.

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

• Пошаговое отображение прогресса инструмента: pending → loading → success / error.
• Маркер состояния рядом с названием шага или ресурса.

Анатомия

State

• success — зелёная заливка.
• error — красная заливка.
• loading — синяя заливка с пульсом.
• pending — полое нейтральное кольцо.

Установка

pnpm add @cloud-ru/ds-ai-tool

import { AiToolStatus } from '@cloud-ru/ds-ai-tool'

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

Состояния статуса

import { AI_TOOL_STATUS_STATE, AiToolStatus } from '@cloud-ru/ds-ai-tool';

export function StatusRow() {
  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
      <AiToolStatus state={AI_TOOL_STATUS_STATE.Pending} />
      <AiToolStatus state={AI_TOOL_STATUS_STATE.Loading} />
      <AiToolStatus state={AI_TOOL_STATUS_STATE.Success} />
      <AiToolStatus state={AI_TOOL_STATUS_STATE.Error} />
    </div>
  );
}

Props

Types

AiToolStatusProps

Unions

AiToolStatusState

Storybook

Figma