better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/badge_component_preview/dot_badges.html.erb

@@ -0,0 +1,28 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Dot Badges (Solid)</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+        <%= render BetterUi::BadgeComponent.new(variant: variant, dot: true) %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Dot Badges (Outline)</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+        <%= render BetterUi::BadgeComponent.new(variant: variant, style: :outline, dot: true) %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Dot Badges (Soft)</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+        <%= render BetterUi::BadgeComponent.new(variant: variant, style: :soft, dot: true) %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/badge_component_preview.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module BetterUi
+  class BadgeComponentPreview < ViewComponent::Preview
+    # @label Default
+    def default
+      render BetterUi::BadgeComponent.new do
+        "Badge"
+      end
+    end
+
+    # @label All Variants
+    # @display bg_color #f5f5f5
+    def all_variants
+      @variants = ApplicationComponent::VARIANTS.keys
+      @styles = [ :solid, :outline, :soft, :ghost ]
+      render_with_template
+    end
+
+    # @label All Styles
+    # @display bg_color #f5f5f5
+    def all_styles
+      @styles = [ :solid, :outline, :soft, :ghost ]
+      render_with_template
+    end
+
+    # @label All Sizes
+    def all_sizes
+      @sizes = [ :xs, :sm, :md, :lg ]
+      render_with_template
+    end
+
+    # @label Dot Badges
+    # @display bg_color #f5f5f5
+    def dot_badges
+      render_with_template
+    end
+
+    # @label Counter Badges
+    # @display bg_color #f5f5f5
+    def counter_badges
+      render_with_template
+    end
+
+    # @label Playground
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param style select { choices: [solid, outline, soft, ghost] }
+    # @param size select { choices: [xs, sm, md, lg] }
+    # @param pill toggle
+    # @param dot toggle
+    # @param counter number
+    def playground(variant: :primary, style: :solid, size: :md, pill: true, dot: false, counter: nil)
+      pill_bool = ActiveModel::Type::Boolean.new.cast(pill)
+      dot_bool = ActiveModel::Type::Boolean.new.cast(dot)
+      counter_val = counter.present? ? counter.to_i : nil
+
+      render BetterUi::BadgeComponent.new(
+        variant: variant,
+        style: style,
+        size: size,
+        pill: pill_bool,
+        dot: dot_bool,
+        counter: counter_val
+      ) do
+        "Badge"
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/breadcrumb/breadcrumb_component_preview/all_separators.html.erb

@@ -0,0 +1,47 @@
+<div class="p-6 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">Slash Separator (default)</h3>
+    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :slash) do |breadcrumb| %>
+      <% breadcrumb.with_item(label: "Home", href: "#") %>
+      <% breadcrumb.with_item(label: "Products", href: "#") %>
+      <% breadcrumb.with_item(label: "Widget") %>
+    <% end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">Chevron Separator</h3>
+    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :chevron) do |breadcrumb| %>
+      <% breadcrumb.with_item(label: "Home", href: "#") %>
+      <% breadcrumb.with_item(label: "Products", href: "#") %>
+      <% breadcrumb.with_item(label: "Widget") %>
+    <% end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">Dot Separator</h3>
+    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :dot) do |breadcrumb| %>
+      <% breadcrumb.with_item(label: "Home", href: "#") %>
+      <% breadcrumb.with_item(label: "Products", href: "#") %>
+      <% breadcrumb.with_item(label: "Widget") %>
+    <% end %>
+  </div>
+
+  <hr class="border-grayscale-200">
+
+  <div>
+    <h3 class="text-lg font-semibold text-grayscale-900 mb-4">All Sizes</h3>
+
+    <div class="space-y-4">
+      <% BetterUi::Breadcrumb::BreadcrumbComponent::SIZES.each do |size| %>
+        <div>
+          <p class="text-sm text-grayscale-500 mb-1">Size: <%= size %></p>
+          <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :chevron, size: size) do |breadcrumb| %>
+            <% breadcrumb.with_item(label: "Home", href: "#") %>
+            <% breadcrumb.with_item(label: "Products", href: "#") %>
+            <% breadcrumb.with_item(label: "Widget") %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/breadcrumb/breadcrumb_component_preview/default.html.erb

@@ -0,0 +1,23 @@
+<div class="p-6 space-y-6">
+  <h3 class="text-lg font-semibold text-grayscale-900">Default Breadcrumb</h3>
+
+  <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new do |breadcrumb| %>
+    <% breadcrumb.with_item(label: "Home", href: "#") %>
+    <% breadcrumb.with_item(label: "Products", href: "#") %>
+    <% breadcrumb.with_item(label: "Categories", href: "#") %>
+    <% breadcrumb.with_item(label: "Electronics") %>
+  <% end %>
+
+  <h3 class="text-lg font-semibold text-grayscale-900 mt-8">Single Item</h3>
+
+  <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new do |breadcrumb| %>
+    <% breadcrumb.with_item(label: "Home") %>
+  <% end %>
+
+  <h3 class="text-lg font-semibold text-grayscale-900 mt-8">Two Items</h3>
+
+  <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new do |breadcrumb| %>
+    <% breadcrumb.with_item(label: "Home", href: "#") %>
+    <% breadcrumb.with_item(label: "Dashboard") %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/breadcrumb/breadcrumb_component_preview/with_icons.html.erb

@@ -0,0 +1,43 @@
+<div class="p-6 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">With Home Icon</h3>
+    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :chevron) do |breadcrumb| %>
+      <% breadcrumb.with_item(label: "Home", href: "#") do |item| %>
+        <% item.with_icon_before do %>
+          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+          </svg>
+        <% end %>
+      <% end %>
+      <% breadcrumb.with_item(label: "Projects", href: "#") %>
+      <% breadcrumb.with_item(label: "Project Alpha") %>
+    <% end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">With Icons on Multiple Items</h3>
+    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :slash, size: :lg) do |breadcrumb| %>
+      <% breadcrumb.with_item(label: "Home", href: "#") do |item| %>
+        <% item.with_icon_before do %>
+          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+          </svg>
+        <% end %>
+      <% end %>
+      <% breadcrumb.with_item(label: "Settings", href: "#") do |item| %>
+        <% item.with_icon_before do %>
+          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
+          </svg>
+        <% end %>
+      <% end %>
+      <% breadcrumb.with_item(label: "Profile") do |item| %>
+        <% item.with_icon_before do %>
+          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+          </svg>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/breadcrumb/breadcrumb_component_preview.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Breadcrumb
+    # @label Breadcrumb
+    class BreadcrumbComponentPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        render_with_template
+      end
+
+      # @label All Separators
+      def all_separators
+        render_with_template
+      end
+
+      # @label With Icons
+      def with_icons
+        render_with_template
+      end
+
+      # @label Playground
+      # @param separator select { choices: [slash, chevron, dot] }
+      # @param size select { choices: [sm, md, lg] }
+      def playground(separator: :slash, size: :md)
+        render BetterUi::Breadcrumb::BreadcrumbComponent.new(
+          separator: separator.to_sym,
+          size: size.to_sym
+        ) do |breadcrumb|
+          breadcrumb.with_item(label: "Home", href: "#")
+          breadcrumb.with_item(label: "Library", href: "#")
+          breadcrumb.with_item(label: "Articles", href: "#")
+          breadcrumb.with_item(label: "Current Article")
+        end
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/button_component_preview/all_sizes.html.erb

@@ -0,0 +1,25 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-6">Button Sizes</h3>
+
+  <div class="space-y-6">
+    <% (@sizes || [:xs, :sm, :md, :lg, :xl]).each do |size| %>
+      <div class="flex items-center gap-4">
+        <span class="w-20 text-sm font-medium text-gray-600 uppercase"><%= size %></span>
+
+        <div class="flex flex-wrap gap-3">
+          <%= render BetterUi::ButtonComponent.new(size: size, variant: :primary) do %>
+            Button <%= size.to_s.upcase %>
+          <% end %>
+
+          <%= render BetterUi::ButtonComponent.new(size: size, variant: :secondary, style: :outline) do %>
+            Outline <%= size.to_s.upcase %>
+          <% end %>
+
+          <%= render BetterUi::ButtonComponent.new(size: size, variant: :success, style: :ghost) do %>
+            Ghost <%= size.to_s.upcase %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview/all_variants.html.erb

@@ -0,0 +1,14 @@
+<div class="p-8 space-y-8">
+  <% (@styles || [:solid, :outline, :ghost, :soft]).each do |style| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Buttons</h3>
+      <div class="flex flex-wrap gap-3">
+        <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
+          <%= render BetterUi::ButtonComponent.new(variant: variant, style: style) do %>
+            <%= variant.to_s.capitalize %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/button_component_preview/as_links.html.erb

@@ -0,0 +1,18 @@
+<div class="p-8 space-y-8">
+  <% [:solid, :outline, :ghost, :soft].each do |style| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Links</h3>
+      <div class="flex flex-wrap gap-3">
+        <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %>
+          <%= render BetterUi::ButtonComponent.new(
+            variant: variant,
+            style: style,
+            href: "#"
+          ) do %>
+            <%= variant.to_s.capitalize %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/button_component_preview/auto_loading_submit.html.erb

@@ -0,0 +1,112 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Auto-Loading Submit Button Demo</h3>
+    <p class="text-sm text-gray-600 mb-4">
+      This button automatically shows a loading spinner when clicked (submit buttons only).
+      The loading state resets automatically when Turbo completes the request.
+    </p>
+
+    <%= turbo_frame_tag "demo-frame" do %>
+      <%= form_with url: "#", method: :post, data: { turbo_frame: "demo-frame" } do |f| %>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">
+              Example Form Field
+            </label>
+            <input
+              type="text"
+              name="example"
+              class="px-3 py-2 border border-gray-300 rounded-md"
+              placeholder="Type something..."
+            />
+          </div>
+
+          <%= render BetterUi::ButtonComponent.new(
+            variant: :primary,
+            type: :submit,
+            show_loader_on_click: true
+          ) do %>
+            Submit Form
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="mt-4 p-4 bg-gray-50 rounded-md">
+        <p class="text-sm text-gray-600">
+          Click the submit button above to see the auto-loading behavior.
+          The spinner appears instantly on click and automatically resets.
+        </p>
+      </div>
+    <% end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Comparison: Regular Button vs Auto-Loading Submit</h3>
+    <div class="grid grid-cols-2 gap-4">
+      <div>
+        <p class="text-sm text-gray-600 mb-2">Regular Button (no auto-loading)</p>
+        <%= render BetterUi::ButtonComponent.new(variant: :secondary, type: :button) do %>
+          Regular Button
+        <% end %>
+      </div>
+      <div>
+        <p class="text-sm text-gray-600 mb-2">Submit with Auto-Loading</p>
+        <%= form_with url: "#", method: :post do |f| %>
+          <%= render BetterUi::ButtonComponent.new(
+            variant: :primary,
+            type: :submit,
+            show_loader_on_click: true
+          ) do %>
+            Auto-Loading Submit
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Different Variants with Auto-Loading</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= form_with url: "#", method: :post do |f| %>
+        <%= render BetterUi::ButtonComponent.new(
+          variant: :primary,
+          type: :submit,
+          show_loader_on_click: true
+        ) do %>
+          Primary
+        <% end %>
+      <% end %>
+
+      <%= form_with url: "#", method: :post do |f| %>
+        <%= render BetterUi::ButtonComponent.new(
+          variant: :success,
+          type: :submit,
+          show_loader_on_click: true
+        ) do %>
+          Success
+        <% end %>
+      <% end %>
+
+      <%= form_with url: "#", method: :post do |f| %>
+        <%= render BetterUi::ButtonComponent.new(
+          variant: :danger,
+          type: :submit,
+          show_loader_on_click: true
+        ) do %>
+          Danger
+        <% end %>
+      <% end %>
+
+      <%= form_with url: "#", method: :post do |f| %>
+        <%= render BetterUi::ButtonComponent.new(
+          variant: :warning,
+          style: :outline,
+          type: :submit,
+          show_loader_on_click: true
+        ) do %>
+          Warning Outline
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview/external_links.html.erb

@@ -0,0 +1,61 @@
+<div class="p-8 space-y-6">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">External Link (opens in new tab)</h3>
+    <p class="text-sm text-gray-600 mb-2">Automatically adds rel="noopener noreferrer" for security</p>
+    <%= render BetterUi::ButtonComponent.new(
+      href: "https://example.com",
+      target: "_blank"
+    ) do |c|
+      c.with_icon_after do %>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+        </svg>
+      <% end
+      "Visit Example.com"
+    end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">External Links with Different Styles</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(
+        href: "https://example.com",
+        target: "_blank",
+        variant: :info,
+        style: :outline
+      ) do |c|
+        c.with_icon_after do %>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+          </svg>
+        <% end
+        "Documentation"
+      end %>
+
+      <%= render BetterUi::ButtonComponent.new(
+        href: "https://github.com",
+        target: "_blank",
+        variant: :dark,
+        style: :solid
+      ) do |c|
+        c.with_icon_before do %>
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+          </svg>
+        <% end
+        "GitHub"
+      end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Link with Custom rel</h3>
+    <%= render BetterUi::ButtonComponent.new(
+      href: "https://example.com",
+      target: "_blank",
+      rel: "nofollow noopener",
+      variant: :secondary,
+      style: :ghost
+    ) { "Sponsored Link (nofollow)" } %>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview/form_integration.html.erb

@@ -0,0 +1,102 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Form with Submit and Reset Buttons</h3>
+    <form class="max-w-md space-y-4">
+      <div>
+        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+          placeholder="Enter your name"
+        />
+      </div>
+
+      <div>
+        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+          placeholder="Enter your email"
+        />
+      </div>
+
+      <div class="flex gap-3">
+        <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :primary) do %>
+          Submit Form
+        <% end %>
+
+        <%= render BetterUi::ButtonComponent.new(type: :reset, variant: :secondary, style: :outline) do %>
+          Reset Form
+        <% end %>
+
+        <%= render BetterUi::ButtonComponent.new(type: :button, variant: :secondary, style: :ghost) do %>
+          Cancel
+        <% end %>
+      </div>
+    </form>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Form Actions with Icons</h3>
+    <form class="max-w-md space-y-4">
+      <div>
+        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
+        <input
+          type="text"
+          id="title"
+          name="title"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+          placeholder="Enter title"
+        />
+      </div>
+
+      <div class="flex gap-3">
+        <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :success) do |button| %>
+          <% button.with_icon_before do %>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+            </svg>
+          <% end %>
+          Save Changes
+        <% end %>
+
+        <%= render BetterUi::ButtonComponent.new(type: :button, variant: :danger, style: :outline) do |button| %>
+          <% button.with_icon_before do %>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          <% end %>
+          Cancel
+        <% end %>
+      </div>
+    </form>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Disabled Form Buttons</h3>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :primary, disabled: true) do %>
+        Disabled Submit
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(type: :reset, variant: :secondary, style: :outline, disabled: true) do %>
+        Disabled Reset
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Loading Form Button</h3>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :primary, loading: true) do %>
+        Submitting...
+      <% end %>
+
+      <p class="text-sm text-gray-600 self-center">Button is disabled during loading state</p>
+    </div>
+  </div>
+</div>