Navigation
Stepper

Stepper

Steppers convey progress through numbered steps. It provides a wizard-like workflow.

01
Step 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam amet aperiam cum dolorem doloribus

02
Step 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam amet aperiam cum dolorem doloribus

03
Step 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


View source

Anatomy

import { Stepper } from "@lualtek/react-components";
 
export default () => {
  return (
    <Stepper title="Step 1" step={3}>
      ...
    </Stepper>
  );
};

API Reference

export type StepperProps = {
  /**
   * The title of the step.
   */
  title: ReactNode;
 
  /**
   * The step number.
   */
  step: number;
 
  /**
   * The content gap between the step number and the content.
   * @defaultValue 16
   */
  contentGap?: StackProps["rowGap"];
 
  /**
   * Fill the content to the available space.
   *
   * @defaultValue false
   */
  fillContent?: boolean;
  /**
   * Fill the width of the stepper.
   */
  fullWidth?: boolean;
};
SnaplistTabs