For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/steps.md.
Leaf UI
  • English

      • Steps

      Show the progress and current step of a task.

      Basic usage

      Interactive steps
      Error feedback
      1. Create projectEnter basic information
      2. Review settingsReview project information
      3. DoneGet started
      basic.tsx
      import type { StepItem } from '@ifhover/leaf-ui';

import { Button, Flex, Space, Steps, Text } from '@ifhover/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 (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>Interactive steps</Text>
        <Steps items={items} current={current} onChange={setCurrent} />
      </Flex>
      <Flex gap="md" align="center" wrap justify="center">
        <Button variant="outline" disabled={current === 0} onClick={() => setCurrent(current - 1)}>
          Previous
        </Button>
        <Button disabled={current === 2} onClick={() => setCurrent(current + 1)}>
          Next
        </Button>
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Error feedback</Text>
        <Steps items={items} current={1} direction="vertical" status="error" size="sm" />
      </Flex>
    </Space>
  );
}

      Dots and step progress

      Dot steps
      1. Create
      2. Review
      3. Publish
      Progress within the current step
      1. Create
      2. Review
      3. Publish
      capabilities.tsx
      import { Flex, Space, Steps, Text } from '@ifhover/leaf-ui';

const items = [{ title: 'Create' }, { title: 'Review' }, { title: 'Publish' }];

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Dot steps'}</Text>
        <Steps progressDot current={1} items={items} />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Progress within the current step'}</Text>
        <Steps current={1} percent={65} items={items} />
      </Flex>
    </Space>
  );
}

      Steps API

      PropertyTypeDefaultDescription
      itemsreadonly StepItem[]RequiredRequired. Step 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
      progressDotboolean | ((dot: ReactNode, info: { index: number; status: string }) => ReactNode)—Use progress dots, optionally with custom content.
      percentnumber—Completion percentage.

      StepItem

      PropertyTypeDefaultDescription
      keystring—Stable identifier
      titleReactNodeRequiredRequired. Step title
      descriptionReactNode—Supporting description
      iconReactNode—Custom icon
      status'wait' | 'process' | 'finish' | 'error'—Override the item status
      disabledbooleanfalseDisable interaction.

      Types

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

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

      Usage notes

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