Merge pull request #29 from substancelab/button_sizes

Add previews of button sizes

Author: koppen

app/components/flowbite/button.rb

@@ -12,7 +12,7 @@ module Flowbite
   class Button < ViewComponent::Base
     SIZES = {
       xs: ["text-xs", "px-3", "py-2"],
-      sm: ["text-sm", "px-3", "py-1.5"],
+      sm: ["text-sm", "px-3", "py-2"],
       default: ["text-sm", "px-5", "py-2.5"],
       lg: ["text-base", "px-5", "py-3"],
       xl: ["text-base", "px-6", "py-3.5"]

demo/test/components/previews/button_preview.rb

@@ -42,6 +42,34 @@ def purple
 
   # @!endgroup
 
+  # @!group Sizes
+  #
+  # Use these examples if you want to use smaller or larger buttons.
+  #
+  # @display classes flex flex-wrap
+
+  def xs_button
+    render(Flowbite::Button.new(label: "Extra small", size: :xs))
+  end
+
+  def sm_button
+    render(Flowbite::Button.new(label: "Small", size: :sm))
+  end
+
+  def default_button
+    render(Flowbite::Button.new(label: "Default", size: :default))
+  end
+
+  def lg_button
+    render(Flowbite::Button.new(label: "Large", size: :lg))
+  end
+
+  def xl_button
+    render(Flowbite::Button.new(label: "Extra large", size: :xl))
+  end
+
+  # @!endgroup
+
   # @!group Pills
   #
   # The button pills can be used as an alternative style by using fully rounded edges.