COMPONENTES · 01 · BOTÕESBotões
Cinco variantes, três alturas, seis estados. O laranja aparece uma única vez por dobra, porque ele é o lugar onde a pessoa decide. Todo o resto da tela é apoio.
// obra ilustrativa. O Residencial Modelo não é a Times Square da LB in, e o avanço de 52,0% que aparece no eco das ações é dado de exemplo, não medição da obra piloto.
Regra do primário único
Cada dobra da aplicação tem no máximo um botão laranja. Se a tela pede duas ações fortes, uma delas vira secundária. Dois primários competindo significam que a hierarquia da decisão não foi resolvida no desenho, e o usuário paga a conta lendo a tela duas vezes.
1.1 · MATRIZ DE ESTADOS// repouso · hover · foco visível · ativo · desabilitado · carregando
// o desabilitado nunca é o único aviso: quando o botão está travado por regra de negócio, a tela explica em texto o que falta. Opacidade não comunica motivo.
1.2 · TRÊS ALTURAS// 36px só é aceitável com mouse e em barra de ferramenta. Em mobile a mesma barra sobe para 44, sem exceção.
1.3 · POSIÇÃO DO ÍCONE// ícone à esquerda descreve a ação, ícone à direita indica para onde a ação leva. A seta só desliza no hover quando ela é de navegação, nunca em confirmação.
1.4 · GRUPO SEGMENTADO// segmentado é seleção única e sempre tem um item marcado. Navegação por seta esquerda e direita, estado em aria-pressed, nunca só na cor.
1.5 · A DOBRA NA PRÁTICAResidencial Modelo · fechamento de abril
26 folhas executáveis programadas, 18 com avanço lançado. O fechamento trava o mês e envia a medição para a construtora.
// um primário, um secundário, um terciário e um destrutivo discreto. Clique no laranja para ver o ciclo de carregamento completo.