Button styles

app/components/flowbite/button.rb

@@ -35,8 +35,26 @@ def styles
           alternative: Flowbite::Style.new(
             default: ["me-2", "mb-2", "font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-lg", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
           ),
+          dark: Flowbite::Style.new(
+            default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+          ),
           default: Flowbite::Style.new(
             default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-blue-600", "dark:hover:bg-blue-700", "focus:outline-none", "dark:focus:ring-blue-800"]
+          ),
+          green: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-green-700", "hover:bg-green-800", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+          ),
+          light: Flowbite::Style.new(
+            default: ["text-gray-900", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+          ),
+          purple: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-purple-700", "hover:bg-purple-800", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+          ),
+          red: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-red-700", "hover:bg-red-800", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+          ),
+          yellow: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:focus:ring-yellow-900"]
           )
         }.freeze
       end

demo/test/components/previews/button_preview.rb

@@ -16,6 +16,30 @@ def alternative
     render(Flowbite::Button.new(label: "Alternative", style: :alternative))
   end
 
+  def dark
+    render(Flowbite::Button.new(label: "Dark", style: :dark))
+  end
+
+  def light
+    render(Flowbite::Button.new(label: "Light", style: :light))
+  end
+
+  def green
+    render(Flowbite::Button.new(label: "Green", style: :green))
+  end
+
+  def red
+    render(Flowbite::Button.new(label: "Red", style: :red))
+  end
+
+  def yellow
+    render(Flowbite::Button.new(label: "Yellow", style: :yellow))
+  end
+
+  def purple
+    render(Flowbite::Button.new(label: "Purple", style: :purple))
+  end
+
   # @!endgroup
 
   # @!group Pills