x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="midwest-steps" role="tablist" aria-label="Progress steps"> <div class="midwest-step current"> <button class="step-button" role="tab" aria-selected="true" aria-current="step" type="button"> <span class="copy">Account</span> </button></div> <div class="midwest-step"> <button class="step-button" role="tab" aria-selected="false" type="button"> <span class="copy">Details</span> </button></div> <div class="midwest-step"> <button class="step-button" role="tab" aria-selected="false" type="button"> <span class="copy">Review</span> </button></div> <div class="midwest-step"> <button class="step-button" role="tab" aria-selected="false" type="button"> <span class="copy">Confirm</span> </button></div></div>1
2
3
4
5
6
<%= midwest_steps do |s| %> <% s.with_step("Account", current: true) %> <% s.with_step("Details") %> <% s.with_step("Review") %> <% s.with_step("Confirm") %><% end %>Default
A sequential step indicator with the first step active.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Steps/default
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."