@govbr-ds/core/dist/components/step/examples/step-text.html

Padrão Digital de Governo

<nav class="br-step" data-initial="3" data-type="text" role="none">
  <div class="step-progress" role="listbox" aria-orientation="horizontal" aria-label="Lista de Opções">
    <button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="5" type="button" data-tooltip-text="Exemplo de Rótulo 1"><span class="step-info">Exemplo de Rótulo 1</span></button>
    <button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="5" type="button" data-tooltip-text="Exemplo de Rótulo 2"><span class="step-info">Exemplo de Rótulo 2</span></button>
    <button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="5" type="button" data-tooltip-text="Exemplo de Rótulo 3"><span class="step-info">Exemplo de Rótulo 3</span></button>
    <button class="step-progress-btn" role="option" aria-posinset="4" aria-setsize="5" type="button" data-tooltip-text="Exemplo de Rótulo 4"><span class="step-info">Exemplo de Rótulo 4</span></button>
    <button class="step-progress-btn" role="option" aria-posinset="5" aria-setsize="5" type="button" data-tooltip-text="Exemplo de Rótulo 5"><span class="step-info">Exemplo de Rótulo 5</span></button>
  </div>
</nav>