Composant Boutons
Un composant de bouton minimaliste pour les tableaux de bord, avec prise en charge du responsive design et du thème sombre.
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>Composants associés
Composant Boutons
Composant de boutons de neumorphisme avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Composant Boutons neumorphes
Un composant de bouton doté d’un style de conception neumorphe avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.