I am trying to design a data catalogue page that shows the state of the data (draft, pending publish, published, pending archive, archived).

When users add their data to the catalogue via a form, they are supposed to choose a state via a "state machine".

The current state machine looks like this as an example for data that is archived:

state machine

The issue I'm having is the best way to present the state machine. Right now it's a bit confusing to look at, and has large spaces between states.

My solution is as follows:

updated state machine

Are there any examples out there for something similar? Does this count as a "stepper?" Should I be showing all 5 states at once?

Any feedback is appreciated.

1 Answer 1


I'm a bit wondering why not use a simple dropdown, which will make an easy way to select one out of 5 steps Or use selection cards

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.