Skip to content
Cimpress UI

Stepper API

Usage guidelinesAPI

Import

Section titled “Import”
import { UNSTABLE_Stepper, UNSTABLE_StepperItem } from '@cimpress-ui/react';

API reference

Section titled “API reference”

Stepper

Section titled “Stepper”

Displays a series of steps in a process.

ref Ref<HTMLOListElement>

The ref type for this component.

UNSTABLE_StepperProps
children * ReactNode

The steps to display in the stepper.

currentStep number

The index of the active step.

onChange (step: number) => void

The callback to call when the current step changes.

orientation 'vertical' | 'horizontal'

The orientation of the stepper.

Defaults to 'horizontal' .
id string

The element's unique identifier. See MDN.

data-cim-style-root boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps
margin Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

StepperItem

Section titled “StepperItem”

Represents a single step in a stepper component.

ref Ref<HTMLLIElement>

The ref type for this component.

UNSTABLE_StepperItemProps
title * string

The title of the step.

description string

The description of the step.

status StepperStatus

The status of the step.

id string

The element's unique identifier. See MDN.

data-cim-style-root boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps
margin Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.