Componenti Pulsanti Componente Pulsanti

Componente Pulsanti

Un componente pulsante minimalista per le dashboard, con supporto per il design reattivo e il tema scuro.

Anteprima

Codice HTML

<div class="flex space-x-4 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Primary Button -->
  <button class="px-4 py-2 rounded-md
    bg-blue-500 text-white font-semibold
    hover:bg-blue-600
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
    dark:bg-blue-700 dark:hover:bg-blue-600">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-300 text-gray-800 font-semibold
    hover:bg-gray-400
    focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75
    dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="px-4 py-2 rounded-md
    bg-green-500 text-white font-semibold
    hover:bg-green-600
    focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75
    dark:bg-green-700 dark:hover:bg-green-600">
    Success
  </button>

  <!-- Danger Button -->
  <button class="px-4 py-2 rounded-md
    bg-red-500 text-white font-semibold
    hover:bg-red-600
    focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75
    dark:bg-red-700 dark:hover:bg-red-600">
    Delete
  </button>

  <!-- Disabled Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-200 text-gray-500 font-semibold
    cursor-not-allowed
    dark:bg-gray-800 dark:text-gray-600"
    disabled>
    Disabled
  </button>
</div>

Componenti correlati

Componente Pulsanti

Un componente di pulsanti reattivi con supporto alla modalità scura, adatto per l'e-commerce, caratterizzato da una semplice combinazione di colori triadici.

Aperto

Componente Pulsanti

Un componente pulsanti in stile retrò/vintage che presenta effetti reattivi e supporto per temi scuri, progettato per evocare la nostalgia dell'estetica degli anni '80 e '90.

Aperto

Componente Pulsanti

Un componente di pulsanti in stile 3D adatto a un portfolio con una combinazione di colori analoga e supporto per la modalità scura.

Aperto