Passos

Onde o leitor se encontra em uma sequência — um túnel, um formulário em várias partes. Os passos atrás são desenhados de forma sólida e podem ser revisitados quando recebem um endereço; o que está sendo feito se destaca; os que estão à frente aguardam, discretos.

Numerados e nomeados

O caso comum: um número para contar, uma palavra para saber o que pede. Os dois passos já percorridos se conectam.

Números sozinhos

Onde os passos não têm nomes que valham a pena ler, ou a largura não tem espaço para eles.

Palavras sozinhas

Sem os números, quando a ordem é óbvia pelas palavras.

Primeiro e último

Nada percorrido ainda, então tudo percorrido, exceto o passo que está sendo feito.

Passos ainda não decididos

Onde os caminhos se separam, o que está por vir depende de uma resposta ainda não dada. O passo que representa isso não recebe número e não movimenta os outros: o último passo aqui é o terceiro, não o quarto.

Compacto, e pontos

Para o cabeçalho de um modal ou de um painel, onde há pouco espaço: compacto mantém os números e nomeia apenas o passo que está sendo feito; pontos desenham um ponto por passo e não nomeiam nenhum na tela, os nomes permanecendo para quem lê a página em voz alta. Logo abaixo do cabeçalho de um modal ou de um painel, um stepper ocupa o lugar da barra de carregamento.

Em uma barra de ferramentas

Disposto em uma barra acima de uma página, ocupa o espaço que a barra lhe dá.

Em vue

O mesmo stepper em uma árvore vue. Passos sem um endereço podem ser transformados em botões: uma sequência mantida pela página avança com o `select` que emite em vez de em um novo endereço.