From c899b8e05a95ca6c004da677147bc327fd8a2fb0 Mon Sep 17 00:00:00 2001
From: Jakob Skjerning <jakob@mentalized.net>
Date: Thu, 21 Aug 2025 11:50:52 +0200
Subject: [PATCH 1/3] Correct sm button size

Not sure where py-1.5 came from, but it should be py-2 to match the
other sizes.

See https://flowbite.com/docs/components/buttons/#button-sizes for
details
---
 app/components/flowbite/button.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/flowbite/button.rb b/app/components/flowbite/button.rb
index ddb621d..9275bee 100644
--- a/app/components/flowbite/button.rb
+++ b/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"]

From 64e99d464de80ebd3772ed47f73bbca5426afcfa Mon Sep 17 00:00:00 2001
From: Jakob Skjerning <jakob@mentalized.net>
Date: Thu, 21 Aug 2025 11:52:02 +0200
Subject: [PATCH 2/3] Add preview with button sizes

---
 .../components/previews/button_preview.rb     | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/demo/test/components/previews/button_preview.rb b/demo/test/components/previews/button_preview.rb
index 8bad5f0..571a9a3 100644
--- a/demo/test/components/previews/button_preview.rb
+++ b/demo/test/components/previews/button_preview.rb
@@ -18,6 +18,34 @@ def alternative
 
   # @!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: "XS", size: :xs))
+  end
+
+  def sm_button
+    render(Flowbite::Button.new(label: "SM", size: :sm))
+  end
+
+  def default_button
+    render(Flowbite::Button.new(label: "Default", size: :default))
+  end
+
+  def lg_button
+    render(Flowbite::Button.new(label: "LG", size: :lg))
+  end
+
+  def xl_button
+    render(Flowbite::Button.new(label: "XL", size: :xl))
+  end
+
+  # @!endgroup
+
   # @!group Pills
   #
   # The button pills can be used as an alternative style by using fully rounded edges.

From 05ee59f6eee3477d2a45e7775bf0ceee0ad9026a Mon Sep 17 00:00:00 2001
From: Jakob Skjerning <jakob@mentalized.net>
Date: Thu, 21 Aug 2025 11:54:55 +0200
Subject: [PATCH 3/3] Prefer human readable names

---
 demo/test/components/previews/button_preview.rb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/test/components/previews/button_preview.rb b/demo/test/components/previews/button_preview.rb
index 571a9a3..182095b 100644
--- a/demo/test/components/previews/button_preview.rb
+++ b/demo/test/components/previews/button_preview.rb
@@ -25,11 +25,11 @@ def alternative
   # @display classes flex flex-wrap
 
   def xs_button
-    render(Flowbite::Button.new(label: "XS", size: :xs))
+    render(Flowbite::Button.new(label: "Extra small", size: :xs))
   end
 
   def sm_button
-    render(Flowbite::Button.new(label: "SM", size: :sm))
+    render(Flowbite::Button.new(label: "Small", size: :sm))
   end
 
   def default_button
@@ -37,11 +37,11 @@ def default_button
   end
 
   def lg_button
-    render(Flowbite::Button.new(label: "LG", size: :lg))
+    render(Flowbite::Button.new(label: "Large", size: :lg))
   end
 
   def xl_button
-    render(Flowbite::Button.new(label: "XL", size: :xl))
+    render(Flowbite::Button.new(label: "Extra large", size: :xl))
   end
 
   # @!endgroup