Buttons com Tailwind CSS

Botões são elementos-chave de interação em qualquer interface. Com o Tailwind CSS, você pode criar botões visualmente consistentes, acessíveis e responsivos com poucas classes utilitárias. A seguir, veja exemplos práticos de botões com estilos comuns e variações úteis para diferentes contextos de uso.

1. Botão primário

<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
  Confirmar
</button>

2. Botão secundário

<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded">
  Cancelar
</button>

3. Botão com ícone (à esquerda)

<button class="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path d="M5 13l4 4L19 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  Salvar
</button>

4. Botão com borda (outline)

<button class="border border-blue-600 text-blue-600 hover:bg-blue-50 font-medium py-2 px-4 rounded">
  Visualizar
</button>

5. Botão com ícone circular

<button class="p-2 bg-gray-200 hover:bg-gray-300 rounded-full">
  <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</button>

6. Botão desabilitado

<button class="bg-gray-400 text-white font-medium py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
  Indisponível
</button>

7. Grupo de botões

<div class="inline-flex rounded-md shadow-sm" role="group">
  <button class="bg-white border border-gray-300 text-gray-800 px-4 py-2 rounded-l hover:bg-gray-100">Anterior</button>
  <button class="bg-white border-t border-b border-gray-300 text-gray-800 px-4 py-2 hover:bg-gray-100">1</button>
  <button class="bg-white border border-gray-300 text-gray-800 px-4 py-2 rounded-r hover:bg-gray-100">Próximo</button>
</div>

Dicas para uso de botões com Tailwind

  • Combine transition, duration-150, ease-in-out para suavizar interações

  • Use disabled:opacity-50 e cursor-not-allowed para estados inativos

  • Crie variantes com @apply ou props em frameworks (React, Vue, etc.)

  • Mantenha consistência usando classes base como .btn, .btn-primary, .btn-outline

Botões são fundamentais na UX. Com Tailwind, você tem controle total da aparência e pode criar componentes altamente reutilizáveis e visualmente coesos.

Updated on
Cards
Forms