Steps

Sequence content using the Steps component

Steps are the best way to display a series of actions of events to your users. You can add as many steps as desired.

1

First Step

These are instructions or content that only pertain to the first step.

2

Second Step

These are instructions or content that only pertain to the second step.

3

Third Step

These are instructions or content that only pertain to the third step.

Steps Props

children

ReactElement<StepProps>[]

required

A list of Step components.

titleSize

string

default: "p"

The size of the step titles. One of p, h2 and h3.

Individual Step Props

children

string | ReactNode

required

The content of a step either as plain text, or components.

icon

string or svg

A Font Awesome icon or SVG code in icon={}

iconType

string

One of regular, solid, light, thin, sharp-solid, duotone, brands

title

string

The title is the primary text for the step and shows up next to the indicator.

stepNumber

number

The number of the step.

titleSize

string

default: "p"

The size of the step titles. One of p, h2 and h3.