Buttons com Tailwind CSS

Botões são os principais pontos de ação e conversão em qualquer interface digital. No ecossistema atual do Tailwind CSS, a construção de botões vai além de definir cores de fundo; trata-se de criar componentes com excelente acabamento visual, hierarquia clara e interações fluidas utilizando a abordagem baseada em CSS nativo.

Abaixo está o guia atualizado e otimizado com padrões modernos de design (cantos mais suaves, sombras sutis, micro-interações de clique e paletas sofisticadas) e em total conformidade com a arquitetura atual do framework.

1. Botão Primário (Ação Principal)

O botão primário deve reter o maior peso visual da tela. Nesta versão premium, adicionamos cantos mais suaves (rounded-xl), uma sombra de elevação sutil e um efeito de escala ao ser clicado (active:scale).

HTML

<button class="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all hover:bg-indigo-700 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
  Confirmar
</button>

2. Botão Secundário (Ação de Apoio)

Usado para ações alternativas (como "Cancelar" ou "Voltar"). Evite usar bordas pesadas ou cores chamativas; tons neutros de cinza e azulados (slate) funcionam melhor.

HTML

<button class="inline-flex items-center justify-center rounded-xl bg-slate-100 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-all hover:bg-slate-200 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-2">
  Cancelar
</button>

3. Botão com Ícone à Esquerda (Aprimoramento de UX)

Ícones ajudam na identificação rápida da ação. O uso de inline-flex e items-center garante o alinhamento vertical perfeito entre o SVG e o texto, enquanto o gap-2 cria o espaçamento ideal.

HTML

<button class="inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md shadow-emerald-100 transition-all hover:bg-emerald-700 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
  <svg class="h-4 w-4 stroke-current stroke-2 fill-none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
  </svg>
  Salvar Alterações
</button>

4. Botão com Borda (Outline / Terciário)

Ideal para ações de menor prioridade ou layouts que já possuem muitos elementos preenchidos. O fundo transparente ganha uma cor suave apenas no estado de hover.

HTML

<button class="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-transparent px-4 py-2.5 text-sm font-semibold text-slate-600 transition-all hover:bg-slate-50 hover:text-slate-900 hover:border-slate-300 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-slate-200">
  Visualizar Detalhes
</button>

5. Botão de Ícone Circular (IconButton)

Comum em barras de ferramentas, ações de fechar (X) ou menus. Garantir que o padding seja igual em todos os lados (p-2.5) e usar rounded-full cria uma área de toque perfeitamente esférica.

HTML

<button class="inline-flex items-center justify-center p-2.5 rounded-full bg-slate-100 text-slate-500 transition-all hover:bg-slate-200 hover:text-slate-800 active:scale-95 focus:outline-none focus:ring-2 focus:ring-slate-300">
  <svg class="h-5 w-5 stroke-current stroke-2 fill-none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
</button>

6. Botão com Estado Desabilitado (Disabled)

Para evitar cliques acidentais em formulários incompletos ou ações indisponíveis. Em vez de gerenciar classes manualmente via JavaScript, utilize o modificador nativo disabled: do Tailwind.

HTML

<button 
  disabled
  class="inline-flex items-center justify-center rounded-xl bg-slate-100 px-4 py-2.5 text-sm font-semibold text-slate-400 border border-slate-200/50 cursor-not-allowed opacity-70 transition-all"
>
  Indisponível no Momento
</button>

7. Grupo de Botões Segmentados (Button Group)

Excelente para paginações ou alternadores de visualização. O segredo aqui é remover as bordas arredondadas internas para criar a ilusão de um bloco único e sólido.

HTML

<div class="inline-flex rounded-xl border border-slate-200 bg-white p-1 shadow-sm" role="group">
  <button class="rounded-lg px-4 py-1.5 text-xs font-semibold text-slate-700 transition-all hover:bg-slate-50 active:bg-slate-100">
    Anterior
  </button>
  <button class="rounded-lg bg-slate-900 px-4 py-1.5 text-xs font-semibold text-white shadow-sm">
    1
  </button>
  <button class="rounded-lg px-4 py-1.5 text-xs font-semibold text-slate-700 transition-all hover:bg-slate-50 active:bg-slate-100">
    Próximo
  </button>
</div>

Diretrizes de Engenharia e UX para Botões

• Micro-interações de Clique: A adição da classe active:scale-[0.98] (ou active:scale-95 em botões circulares) gera um efeito físico de compressão extremamente satisfatório. Essa pequena resposta visual enriquece consideravelmente a percepção de polimento da interface.

• Acessibilidade de Foco Semântica: Substitua o sumiço do contorno padrão (focus:outline-none) por anéis de foco personalizados baseados na cor de destaque do botão, como focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2. Isso preserva a acessibilidade para quem navega usando o teclado sem poluir o visual para quem usa o mouse.

• Abstração Limpa em Frameworks: Em ambientes de produção baseados em componentes (React, Next.js, Vue, Angular), evite espalhar strings longas de classes por dezenas de arquivos. Centralize a estrutura base em um componente <Button /> genérico e utilize objetos para injetar as variações de forma estática e limpa:

JavaScript

// Exemplo de mapeamento limpo e totalmente rastreável pelo compilador
const buttonVariants = {
  primary: "bg-indigo-600 text-white hover:bg-indigo-700 shadow-indigo-100",
  secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200",
  outline: "border border-slate-200 text-slate-600 hover:bg-slate-50"
};

A combinação correta dessas classes utilitárias atômicas permite construir botões de alto padrão visual, com estados interativos previsíveis e excelente performance de renderização.