Button
Um botão faz uma ação na tela onde está: salvar, abrir, apagar. Para ir a outra página, é um Link.
Nesta página
Playground
Variante
Tamanho
Estado
Fundo
<button class="feitio-button" type="button">Salvar alterações</button>Quando usar
- Para uma ação que acontece aqui: salvar, enviar, abrir um Dialog.
- Para a ação principal de um formulário, no fim dele.
Quando não usar
- Para ir a outra página: use um Link, mesmo que pareça uma ação.
- Vários laranjas na mesma tela: só um é o principal.
Exemplos
Principal
A ação que a tela existe para fazer. Laranja, e no máximo um por tela.
Mostrar código
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>Comum
Todas as outras ações. Na dúvida, é este.
Mostrar código
<button type="button" class="feitio-button">Cancelar</button>Perigo
Ações que destroem ou não têm volta. Vinho, nunca laranja, e sempre com um Dialog antes de agir.
Mostrar código
<button type="button" class="feitio-button" data-variant="danger">Apagar agendamento</button>Com ícone
O ícone vem antes da palavra e acompanha, nunca substitui.
Mostrar código
<button type="button" class="feitio-button">
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
Novo agendamento
</button>Tamanhos
Pequeno para barras e ferramentas, padrão para quase tudo, grande para a ação de uma página inteira.
Mostrar código
<button type="button" class="feitio-button" data-size="small">Pequeno</button>
<button type="button" class="feitio-button">Padrão</button>
<button type="button" class="feitio-button" data-size="large">Grande</button>Anatomia
- Caixa: cantos irregulares do Feitio e o traço de tinta de 1px.
- Ícone, opcional: sempre antes da palavra.
- Rótulo: verbo e objeto.
- Foco: o contorno laranja, sempre que o teclado chega.
Estados
- Mouse por cima: o papel levanta um pouco.
- Foco: o contorno laranja, sempre que o teclado chega.
- Esperando: diz o que está fazendo ("Salvando…") e não aceita outro toque.
Bons e maus padrões
Faça assim
Um laranja só, com verbo e objeto.
Não faça
Dois laranjas e um "OK" que não diz o quê.
Como escrever
- Verbo e objeto: "Salvar alterações", "Apagar agendamento". Nunca "OK" ou "Sim".
- Duas a três palavras; a primeira com maiúscula, o resto não.
Acessibilidade
- É um
<button>de verdade, comtype: o teclado e o leitor de tela já sabem usar. - Só ícone, sem palavra, leva
aria-label. - Alvo de pelo menos 40px, mesmo no pequeno.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-button" | obrigatório | O botão do Feitio. |
data-variant | "primary", "danger" | Principal (laranja) ou perigo (vinho). Sem ele, o comum. |
data-size | "small", "large" | Pequeno (32px, toque de 40px) ou grande (52px). |
aria-busy | "true" | Enquanto a ação roda: espera e não aceita outro toque. |