Steps

A navigation bar that guides users through the steps of a task.

When To Use

When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

Examples

• Basic · simple

• Error status · error

• Vertical · vertical

• Clickable · clickable

• Panel Steps · panel

• With icon · icon

• Title Placement and Progress · title-placement

• Max Count · max-count

• Dot Style · progress-dot

• Navigation Steps · nav

• Inline Steps · inline

• Inline Style Combination · inline-variant

• Custom semantic dom styling · style-class

API

Common props ref：Common props

Steps

The whole of the step bar.

StepItem

A single step in the step bar.

Semantic DOM

Steps

Semantic description source: vendor/components/steps/demo/_semantic.tsx

StepItem

Semantic description source: vendor/components/steps/demo/_semantic_items.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Declaration source: vendor/components/steps/style/index.ts

import type { CSSProperties } from 'react';

import type { CSSObject } from '@ant-design/cssinjs';

import { genFocusOutline, resetComponent, textEllipsis } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import { genCssVar } from '../../theme/util/genStyleUtils';

import genHorizontalStyle from './horizontal';

import genIconStyle from './icon';

import genInlineStyle from './inline';

import genLabelPlacementStyle from './label-placement';

import genMaxCountStyle from './max-count';

import genLegacyNavStyle from './nav';

import genPanelStyle from './panel';

import genStepsProgressStyle from './progress';

import genDotStyle from './progress-dot';

import genRTLStyle from './rtl';

import genSmallStyle from './small';

import genStatusStyle from './status';

import genVerticalStyle from './vertical';

export interface ComponentToken {
  /**
   * @desc 描述区域最大宽度
   * @descEN Max width of description area
   * @deprecated This value has been removed by default since v6
   */
  descriptionMaxWidth?: number;
  /**
   * @desc 自定义图标容器尺寸
   * @descEN Size of custom icon container
   */
  customIconSize: number;
  /**
   * @desc 自定义图标 top
   * @descEN Top of custom icon
   */
  customIconTop: number;
  /**
   * @desc 自定义图标大小
   * @descEN Font size of custom icon
   */
  customIconFontSize: number;
  /**
   * @desc 图标容器尺寸
   * @descEN Size of icon container
   */
  iconSize: number;
  /**
   * @desc 图标 top
   * @descEN Top of icon
   */
  iconTop: number;
  /**
   * @desc 图标大小
   * @descEN Size of icon
   */
  iconFontSize: number;
  /**
   * @desc 点状步骤点大小
   * @descEN Size of dot
   */
  dotSize: number;
  /**
   * @desc 点状步骤点当前大小
   * @descEN Current size of dot
   */
  dotCurrentSize: number;
  /**
   * @desc 可跳转步骤条箭头颜色
   * @descEN Color of arrow in nav
   */
  navArrowColor: string;
  /**
   * @desc 可跳转步骤条内容最大宽度
   * @descEN Max width of nav content
   */
  navContentMaxWidth: CSSProperties['maxWidth'];
  /**
   * @desc 小号步骤条图标大小
   * @descEN Size of small steps icon
   */
  iconSizeSM: number | string;
  /**
   * TODO: deprecated warning since not used anymore
   * @desc 标题行高
   * @descEN Line height of title
   * @deprecated Not used anymore
   */
  titleLineHeight: number | string;
}

export interface StepsToken extends FullToken<'Steps'> {
  inlineDotSize: number;
}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/steps/PanelArrow.tsx
• vendor/components/steps/ProgressIcon.tsx
• vendor/components/steps/context.ts
• vendor/components/steps/index.tsx
• vendor/components/steps/style/index.ts
• vendor/components/steps/useDisplaySteps.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.