Steps

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

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

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' },
      ]}
    />
  );
}

Result

Loading...

Vertical Steps

Live Editor

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' },
      ]}
    />
  );
}

Result

Loading...

Status Indicators

Live Editor

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>
  );
}

Result

Loading...

Dot Style and Small Size

Live Editor

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>
  );
}

Result

Loading...

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

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

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.