Elastic UI

Steps

Numbered steps

1

Step 1 with a long title to check what happens during wrapping which should have been fixed.

Do this first

2

Step 2

Then this

Set firstStepNumber to continue step numbering after any type of break in the content

3

Good step

Do this first

4

Better step

Then this

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

1

Step 1 has intro plus code snippet

Run this code snippet to install things.

npm install
2

Step 2 has sub steps

In order to complete this step, do the following things in order.

  1. Do thing 1
  2. Do thing 2
  3. Do thing 3

Here are some bullet point reminders.

  • Reminder 1
  • Reminder 2
  • Reminder 3
3

Step 3 has an intro and one line instruction

Now that you've completed step 2, go find the thing.

Go to Overview >> Endpoints note Elasticsearch as <thing>.

4

The last step has two options

Option 1: If you have this type of instance

  1. Do thing 1
  2. Do thing 2
  3. Do thing 3

Option 2: If you have the other type of instance

  1. Do thing 1
  2. Do thing 2
  3. Do thing 3

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.

Heading 1

1

Inspect me

Did you notice the step title is inside a Heading 2 element?

Steps status

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

1

Normal step

Do this first

Push the button to complete this final step

We are fancy buttons just waiting to be pushed!

Horizontal steps

For use when forms/setup instructions can and should be split into multiple pages.

For each step object, be sure to signify previous/completed steps with isComplete: true and the current/selected step with isSelected: true.