Leaf UI
  • English

      • Steps

      Show the progress and current step of a task.

      Basic usage

      Live previewBasic usage
      1. Create projectEnter basic information
      2. Review settingsReview project information
      3. DoneGet started
      basic.tsx
      import { Button, type StepItem, Steps } from '@sudden3/leaf-ui';
import { useState } from 'react';

const items: readonly StepItem[] = [
  { title: 'Create project', description: 'Enter basic information' },
  { title: 'Review settings', description: 'Review project information' },
  { title: 'Done', description: 'Get started' },
];
export function StepsBasic() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Steps items={items} current={current} onChange={setCurrent} />
      <div className="leaf-demo-row">
        <Button variant="outline" disabled={current === 0} onClick={() => setCurrent(current - 1)}>
          Previous
        </Button>
        <Button disabled={current === 2} onClick={() => setCurrent(current + 1)}>
          Next
        </Button>
      </div>
      <Steps items={items} current={1} direction="vertical" status="error" size="sm" />
    </div>
  );
}

      Steps API

      PropTypeDefaultDescription
      itemsreadonly StepItem[]RequiredStep items
      currentnumber0Current step index, starting at 0
      status'process' | 'finish' | 'error''process'Current step status
      direction'horizontal' | 'vertical''horizontal'Layout direction
      size'sm' | 'md' | 'lg''md'Step size
      loadingbooleanfalseShow a spinner for the current step
      onChange(current: number) => void—Makes steps selectable

      StepItem

      PropTypeDefaultDescription
      keystring—Stable identifier
      titleReactNodeRequiredStep title
      descriptionReactNode—Supporting description
      iconReactNode—Custom icon
      status'wait' | 'process' | 'finish' | 'error'—Override the item status
      disabledbooleanfalsePrevent selecting the step

      Types

      Import the component props and item types when preparing your own values.

      import type { StepsProps, StepItem } from '@sudden3/leaf-ui';

      Usage notes

      Keep current in application state. onChange reports the selected index. Item statuses are derived from current unless explicitly supplied.