import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Steps

A navigation component for guiding users through multi-step workflows. Supports horizontal, vertical, and inline layouts with progress tracking.

Live Example

Try It

Edit the code below to experiment with the component:

tsx

function Demo() {
  return (
    <Steps
      current={1}
      items={[
        { title: 'Connect Database', description: 'Configure the connection' },
        { title: 'Create Dataset', description: 'Select tables and columns' },
        { title: 'Build Chart', description: 'Choose visualization type' },
      ]}
    />
  );
}

Vertical Steps

tsx

function VerticalSteps() {
  return (
    <Steps
      direction="vertical"
      current={1}
      items={[
        { title: 'Upload CSV', description: 'Select a file from your computer' },
        { title: 'Configure Columns', description: 'Set data types and names' },
        { title: 'Review', description: 'Verify the data looks correct' },
        { title: 'Import', description: 'Save the dataset' },
      ]}
    />
  );
}

Status Indicators

tsx

function StatusSteps() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
      <div>
        <h4>Error on Step 2</h4>
        <Steps
          current={1}
          status="error"
          items={[
            { title: 'Connection', description: 'Configured' },
            { title: 'Validation', description: 'Failed to validate' },
            { title: 'Complete' },
          ]}
        />
      </div>
      <div>
        <h4>All Complete</h4>
        <Steps
          current={3}
          items={[
            { title: 'Step 1' },
            { title: 'Step 2' },
            { title: 'Step 3' },
          ]}
        />
      </div>
    </div>
  );
}

Dot Style and Small Size

tsx

function DotAndSmall() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
      <div>
        <h4>Progress Dots</h4>
        <Steps
          progressDot
          current={1}
          items={[
            { title: 'Create', description: 'Define the resource' },
            { title: 'Configure', description: 'Set parameters' },
            { title: 'Deploy', description: 'Go live' },
          ]}
        />
      </div>
      <div>
        <h4>Small Size</h4>
        <Steps
          size="small"
          current={2}
          items={[
            { title: 'Login' },
            { title: 'Verify' },
            { title: 'Done' },
          ]}
        />
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`direction`	`string`	`"horizontal"`	Layout direction of the steps.
`current`	`number`	`1`	Index of the current step (zero-based).
`labelPlacement`	`string`	`"horizontal"`	Position of step labels relative to the step icon.
`progressDot`	`boolean`	`false`	Whether to use a dot style instead of numbered icons.
`size`	`string`	`"default"`	Size of the step icons and text.
`status`	`string`	`"process"`	Status of the current step.
`type`	`string`	`"default"`	Visual style: default numbered, navigation breadcrumb, or inline compact.
`title`	`string`	`"Step 3"`	-
`description`	`string`	`"Description 3"`	-
`items`	`any`	`[{"title":"Connect Database","description":"Configure the connection"},{"title":"Create Dataset","description":"Select tables and columns"},{"title":"Build Chart","description":"Choose visualization type"}]`	-

Import

tsx

import { Steps } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::