Pular para o conteúdo

Ações

Botões em pílula, sem contorno: a forma vem do preenchimento. O laranja fica só na conversão, uma por tela. A área de toque nunca muda entre estados.

Botão

O primário usa o realce do tema (Verde no claro, Pistache no escuro). O secundário é um preenchimento leve na cor do texto, sem contorno. Fantasma só ganha fundo no hover. Texto é o link em forma de botão.

Variantes

.rq-botao · --secundario · --fantasma · --texto · --perigo
Ver a aceleração Ver o desenvolvimento Falar sobre CRM Conhecer as frentes

Tamanhos, ícone e estados

--p · --g · --bloco · .rq-botao__seta · aria-busy · disabled
Conhecer as frentes
Quando usar
Um primário por bloco. Navegação é <a>; ação na página é <button type="button">.
Acessibilidade
aria-busy="true" esconde o rótulo e mostra o anel; o leitor de tela continua lendo o rótulo. Com disabled o botão sai da ordem do Tab; com aria-disabled fica, e explica o motivo por perto.
Tokens
--rq-controle-h (48, 40 compacto), --rq-realce, --rq-sobre-realce, --rq-perigo-acao, --rq-sobre-perigo-acao, --rq-anel-acento.
Perigo
Laranja escurecido com o rótulo no fundo. No pistache vira Neve e no verde, Grafite, com o rótulo na cor de perigo: laranja sólido não toca verde. Nunca ao lado do primário verde.

Conversão

Laranja com rótulo Grafite e um disco Neve com a seta. No hover a seta gira de diagonal para frente. Laranja sólido não toca verde sólido: no tema verde vira Pistache com rótulo Grafite e no pistache, Grafite com rótulo Neve. O anel de foco do laranja é Grafite nos temas claros e Neve nos escuros. Uma por tela.

Padrão, pequena e em bloco

.rq-conversao · __icone · --p · --bloco
Solicite um orçamento Falar com a Chesslab Falar com a Chesslab
Quando usar
A ação que a página existe para provocar. A pequena serve ao cabeçalho; em bloco, ao menu do celular e ao fim de formulário.
Contraste
Grafite sobre Laranja dá 6,4:1. Neve sobre Laranja daria 2,3:1: nunca.

Botão-ícone

Redondo, discreto por padrão. Sempre com aria-label. --solido para a ação principal de uma barra, --fantasma para fechar e opções.

Grupo e segmentado

Grupo

.rq-grupo-botoes · --unido

A ação principal à esquerda, a alternativa ao lado. --unido junta botões de uma mesma família.

Ver a aceleração Conhecer as frentes

Segmentado

.rq-segmentado · data-rq="segmentado"

Uma escolha entre poucas opções que muda a vista na hora (período de um painel, desktop ou celular). Rádios nativos: setas trocam a opção. Com o módulo, a marca desliza com a curva de mola.