Button

  <%= render(RailsUi::Button::Component.new) { "Default Button" } %>

  <%= render(RailsUi::Button::Component.new(title: "Oliii")) { "Default Button" } %>

  <%= render(RailsUi::Button::Component.new(variant: :secondary, size: :lg)) { "Secondary Large Button" } %>

  <%= render(RailsUi::Button::Component.new) do |component| %>
  <% component.with_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" />
    </svg>
  <% end %>
  Button with Icon
<% end %>

  <%= render(RailsUi::Button::Component.new(id: "custom-button", data: { controller: "button", action: "click->button#handleClick" })) { "Custom Button" } %>

  <%= render(RailsUi::Button::Component.new(variant: :secondary, size: :lg)) { "Large Secondary Button" }  %>

  <%= render(RailsUi::Button::Component.new(variant: :outline, size: :sm)) { "Small Outline Button" } %>

  <%= render(RailsUi::Button::Component.new(variant: :ghost, size: :sm)) { "Ghost" } %>