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"]
diff --git a/demo/test/components/previews/button_preview.rb b/demo/test/components/previews/button_preview.rb
index 8bad5f0..182095b 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: "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.