Steps

EuiSteps presents procedural content in a numbered outline format. It is best used when presenting instructional content that must be conducted in a particular order. It requires a

title and children to be present and will automatically increment the step number based on the initial firstStepNumber.

Component

Default

Loading...

Horizontal Steps

EuiStepsHorizontal should be used when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the status key to denote the user's progress.

For horizontal steps, the status key defaults to "incomplete" and the default filled styling is reserved for indicating "current" status.

Use the size property to generate smaller step circles.

Loading...

Usage

Complex steps

If you need to call out a set of substeps that are not lines of code, most likely a <ol/>, wrap the block in a <EuiSubSteps/>.

Loading...

Heading elements

To aid with accessibility and hierarchical headings, you can and should pass in a heading element to use for each step title. The example below shows that the logical heading element should be an h2and therefore adds headingElement="h2" to the EuiSteps component.

The style of the title will not be affected.

Loading...

Conveying status

Steps can optionally include status prop that will alter the look of the number prefix. The options are incomplete, complete, warning, danger, disabled and loading. This is used mostly as a final step when you need to make some sort of final check.

Loading...

Custom title sizes

You can set a different title size using titleSize. If titleSize is set in both EuiSteps and EuiStep, the latter value will override the former. Additionally, the title size xs will automatically generate smaller steps circles.

The title size xxs affects only the size of the accompanying unnumbered step indicator, but not the title itself.

Loading...

Props

EuiSteps

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop steps# ↦	Description and type An array of EuiStep objects excluding the step prop Type: EuiContainedStepProps[] ↦	Default value Required ↵
Prop firstStepNumber# ↦	Description and type The number the steps should begin from Type: number ↦	Default value 1 ↵
Prop headingElement# ↦	Description and type The HTML tag used for the title Type: string ↦	Default value p ↵
Prop titleSize# ↦	Description and type Title sizing equivalent to EuiTitle, but only m, s, xs font sizes. The xxs size reduces the size of the accompanying step indicator, but not the title itself. Type: "xs" | "s" | "m" | "xxs" ↦	Default value s ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiStep

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop title# ↦	Description and type Type: string ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop children# ↦	Description and type ReactNode to render as this component's content Type: ReactNode ↦	Default value ↵
Prop headingElement# ↦	Description and type The HTML tag used for the title Type: string ↦	Default value p ↵
Prop step# ↦	Description and type The number of the step in the list of steps Type: number ↦	Default value 1 ↵
Prop status# ↦	Description and type May replace the number provided in props.step with alternate styling. Type: "warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete" ↦	Default value ↵
Prop titleSize# ↦	Description and type Title sizing equivalent to EuiTitle, but only m, s, xs font sizes. The xxs size reduces the size of the accompanying step indicator, but not the title itself. Type: "xs" | "s" | "m" | "xxs" ↦	Default value s ↵

𐘂𐘂

EuiStepNumber

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop status# ↦	Description and type May replace the number provided in props.number with alternate styling Type: "warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete" ↦	Default value ↵
Prop number# ↦	Description and type Type: number ↦	Default value ↵
Prop titleSize# ↦	Description and type Title sizing equivalent to EuiTitle, but only m, s, xs. none indicates no step number should be rendered. Type: "xs" | "s" | "m" | "none" ↦	Default value s ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiSubSteps

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiStepsHorizontal

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop steps# ↦	Description and type An array of EuiStepHorizontal objects excluding the step prop Type: Omit<EuiStepHorizontalProps, "step">[] ↦	Default value Required ↵
Prop size# ↦	Description and type Type: "xs" | "s" | "m" ↦	Default value m ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiStepHorizontal

Extends ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onClick# ↦	Description and type Type: MouseEventHandler<HTMLButtonElement> ↦	Default value Required ↵
Prop disabled# ↦	Description and type Makes the whole step button disabled. Type: boolean ↦	Default value ↵
Prop step# ↦	Description and type The number of the step in the list of steps Type: number ↦	Default value 1 ↵
Prop title# ↦	Description and type Type: string ↦	Default value ↵
Prop status# ↦	Description and type Visual representation of the step number indicator. May replace the number provided in props.step with alternate styling. The disabled prop will override this. Type: "warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete" ↦	Default value incomplete ↵
Prop size# ↦	Description and type Type: "xs" | "s" | "m" ↦	Default value m ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂