Progress Steps

Display the progression of a long-lasting task with various steps

<ProgressSteps {steps} />

Properties

Property Description Type Default
steps The steps to display the progress. The array must contain at least one element. ProgressStep

Interface

A Step requires following information:

Property Description Type Default
step A key. string
text The related text to display next to the step. string
state The status of the step. next or in_progress or completed

Note

The component itself is not animated. Updating the steps property re-render the UI accordingly and per extension can be use to display a progression.

Showcase

Connection with sale canister
Completed
2
Sending tokens
In progress