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

Padrão Digital de Governo

<div class="my-5">
  <nav class="br-step" data-initial="1" data-type="void" 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="3" 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="3" 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="3" type="button" data-tooltip-text="Exemplo de Rótulo 3"><span class="step-info">Exemplo de Rótulo 3</span></button>
    </div>
  </nav>
</div>
<div class="my-5">
  <nav class="br-step" data-initial="1" data-type="void" 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="4" type="button" data-tooltip-text="Acesse sua Conta" data-alert="success"><span class="step-info">Acesse sua Conta</span><span class="step-alert"></span></button>
      <button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="4" type="button" data-tooltip-text="Dados da entrega" data-alert="info"><span class="step-info">Dados da entrega</span><span class="step-alert"></span></button>
      <button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="4" type="button" data-tooltip-text="Dados de Pagamento" data-alert="danger"><span class="step-info">Dados de Pagamento</span><span class="step-alert"></span></button>
      <button class="step-progress-btn" role="option" aria-posinset="4" aria-setsize="4" type="button" data-tooltip-text="Finalizar" disabled="disabled" data-alert="warning"><span class="step-info">Finalizar</span><i class="step-icon fas fa-check" aria-hidden="true"></i><span class="step-alert"></span></button>
    </div>
  </nav>
</div>
<div class="my-5">
  <nav class="br-step" data-initial="1" data-type="simple" 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>
</div>
<div class="my-5">
  <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>
</div>