# Botão (`botao`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Botão de ação em quatro estilos (primário, secundário, contorno e link), com tamanhos e grupo de botões.

- **Categoria:** Básicos
- **Equivalente no Elementor:** Botão (Button)
- **Arquivos:** `botao.html`, `botao.css`
- **Precisa de JavaScript:** não

## Quando usar
- Chamar para a ação principal da seção (primário, um por seção)
- Ação alternativa ao lado da principal (secundário ou contorno)
- Ação discreta dentro de texto ou cartão (link)

## Quando não usar
- Para navegação de menu (use o cabeçalho)
- Dois botões primários lado a lado: o visitante não sabe qual clicar

## Variações
- **Primário:** classe ds-botao--primario
- **Secundário:** classe ds-botao--secundario
- **Contorno:** classe ds-botao--contorno
- **Link:** classe ds-botao--link
- **Grande:** classe ds-botao--grande
- **Largura total:** classe ds-botao--bloco
- **Grupo empilhado no celular:** ds-botao-grupo ds-botao-grupo--empilhar

## Conteúdo esperado
- Texto curto com verbo de ação
- Destino (href) ou tipo do botão
- Ícone opcional depois do texto

## Acessibilidade
- <a> para navegar, <button type="button"> para ação: nunca div clicável
- Área de toque mínima de 44px de altura
- Foco visível pelo anel do DS
- Desativado com o atributo disabled (button) ou aria-disabled="true" (link)

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
```

Tokens do contrato usados: `--ds-borda-largura-forte`, `--ds-botao-fonte`, `--ds-botao-pad-x`, `--ds-botao-pad-y`, `--ds-botao-tamanho`, `--ds-cor-destaque`, `--ds-cor-destaque-2`, `--ds-cor-sobre-destaque`, `--ds-cor-sobre-destaque-2`, `--ds-cor-texto-destaque`, `--ds-cor-titulo`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-2`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-peso-forte`, `--ds-raio-botao`, `--ds-sombra-md`, `--ds-sombra-sm`, `--ds-tamanho-texto-grande`.