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...

Props

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 ↵

𐘂𐘂