# Button

Um botão faz uma ação na tela onde está: salvar, abrir, apagar. Para ir a outra página, é um Link.

## Playground

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

1.  **Caixa:** cantos irregulares do Feitio e o traço de tinta de 1px.
2.  **Ícone**, opcional: sempre antes da palavra.
3.  **Rótulo:** verbo e objeto.
4.  **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

Salvar alteraçõesCancelar

Um laranja só, com verbo e objeto.

Não faça

OKCancelar

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, com `type`: 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.