Steps
Os Steps permitem a navegação entre etapas através de cliques em itens ou podem servir como referência, informando onde a pessoa usuária está, para onde vai e quanto falta para chegar lá - neste último caso, sem a navegação por clique.
Existem dois tipos de Steps: Vertical ou Horizontal.
Vertical
São usados para quebrar um fluxo em etapas menores. São aplicados no corpo da página em que o fluxo estará disponível.
Por ter layout vertical, não existe limite de quantidade de etapas, mas deve ser levado em conta a experiência da pessoa usuária dentro do fluxo.
Horizontal
Assim como os verticais, os Steps horizontais também são usados para quebrar um fluxo em etapas menores.
A aplicação deve ser no topo da página, contextualizando logo no início da navegação.
Para ter um layout horizontal é necessário verificar se existem outros elementos ao lado e como será o comportamento em resoluções de telas diferentes.
Boas práticas
- Não deve ser usado para navegação convencional. Para isso, use o componente de Tabs
- Use rótulos claros para cada etapa de progresso; eles são cruciais para informar onde a pessoa usuária está
- Identifique o que as etapas podem exigir da pessoa usuária. Por exemplo: etapa de conteúdo, configuração, segurança, entre outros
- Use no máximo 2 palavras nos rótulos