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

Padrão Digital de Governo

<div class="step-sample-2">
  <nav class="br-step" data-initial="2" data-label="top" data-scroll="data-scroll" 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-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-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-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" 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>