Komponenten Tasten Buttons-Komponente

Buttons-Komponente

Eine minimalistische Schaltflächenkomponente für Dashboards mit Unterstützung für responsives Design und dunkles Design.

Vorschau

HTML-Code

<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>

Verwandte Komponenten

Art Deco Immobilien-Buttons-Komponente

Eine komplexe, vom Art Deco inspirierte Schaltflächenkomponente für Immobilienplattformen mit geometrischen Mustern, luxuriösem Graustufen-Styling und mehreren interaktiven Elementen mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Buttons-Komponente

Eine Tastenkomponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen, die die Ästhetik der 80er und 90er Jahre nostalgisch heraufbeschwören soll.

Offen

Buttons-Komponente

Eine Schaltflächenkomponente im Retro-Vintage-Stil mit triadischem Farbschema, einfacher Komplexität und ansprechendem Design mit Unterstützung des Dunkelmodus, geeignet für einen Blog oder eine Content-Website.

Offen