Button
Hierarquia, variantes e estados do botão no ME — o UButton do Nuxt UI, tematizado.
UButton do Nuxt UI tematizado pelo ME (primary = me-brand-500 · #1052E0); não existe um Button próprio do EDS — diferente do ButtonBar, que é bloco EletroDS.O botão dispara a ação de uma tela. O que importa não é qual cor existe, e sim a hierarquia: cada contexto tem uma ação principal, e o visual precisa deixar isso óbvio à primeira leitura.
Hierarquia
O Nuxt UI expõe 7 cores × 6 variantes (42 combinações). O ME usa só este subconjunto — escolha pela importância da ação, não pela estética:
| Nível | Como | Quando — e por quê |
|---|---|---|
| Primária | color="primary" (solid) | A ação que a tela quer que você faça (CTA). Uma só por contexto — dois primários competindo diluem o foco e o usuário hesita. |
| Secundária | color="neutral" variant="outline" | Ação de apoio relevante. Presente e clicável, mas sem roubar a atenção do primário. |
| Terciária | color="neutral" variant="ghost" | Ação frequente de baixo peso (toolbar, só-ícone). Peso visual mínimo para não poluir áreas densas. |
| Destrutiva | color="error" | Excluir/remover. A cor sinaliza risco antes do clique; quando irreversível, exige confirmação (ver Excluir). |
| Confirmação | color="success" | Uso pontual, em confirmações positivas explícitas. Não é o CTA padrão — não substitui o primário. |
Tamanhos & largura
| Quero… | Use | Por quê |
|---|---|---|
| Densidade de tabela | size="sm" | Cabe na altura da linha sem quebrar o ritmo. |
| Padrão das telas | size="md" (default) | Tamanho de referência do produto. |
| Destaque / telas amplas | size="lg" · xl | CTA que precisa de presença. |
| Largura total | block | Só em mobile e rodapé de modal — alvo de toque maior e ação única em foco em telas estreitas. Evite no desktop (botão esticado perde a leitura de hierarquia). |
Estados
| Estado | Comportamento |
|---|---|
| Default | Ação disponível. |
| Hover / focus | Foco sempre visível (o teclado depende disso); acionável por Enter/Espaço. |
disabled | Botão inerte — use quando a ação não se aplica ao contexto. Percebido além da cor (opacidade + aria-disabled). |
loading / loading-auto | Spinner no botão e bloqueia o reclique; mantém o rótulo (não vira só ícone) e marca aria-busy. loading-auto liga sozinho enquanto a promise do @click resolve. |
square + icon | Botão só-ícone — exige nome acessível (aria-label); o ícone não basta para leitor de tela. |
Onde se aplica
No código
É o UButton do Nuxt UI, tematizado pelo ME (não há componente EDS próprio). Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: ui.nuxt.com/docs/components/button. Aqui o foco é o uso em Design.
Para fileiras de ações (várias ações num header/toolbar), não enfileire botões soltos — use o ButtonBar.
Acessibilidade
- Botão só-ícone (
square+icon) precisa de nome acessível (aria-label) — o ícone não basta para leitores de tela. - Foco visível sempre; ordem de foco coerente com a leitura. Acionável por
Enter/Espaço. - Alvo de toque ≥ 44px; em densidade de tabela (
size="sm"), garanta a área clicável. disabled/loadingpercebidos além da cor (aria-disabled/aria-busy).- Hierarquia e risco nunca só pela cor — a destrutiva (
error) vem com rótulo claro e, quando crítica, confirmação.
Labeling
Rótulo de botão = verbo + entidade explícita ("Novo fornecedor", não só "Novo") — assim a ação se explica fora de contexto. A escolha do verbo (Novo / Adicionar / Gerar) segue Voz e conteúdo e o pattern Adicionar.