Button

<%= render(Zui::Button.new) { "Button" } %>
<%= zui("button", contrast: :high) { "Button" } %>
<%= zui("button", variant: :soft) { "Button" } %>
<%= zui("button", variant: :soft, contrast: :high) { "Button" } %>
<%= zui("button", variant: :outline) { "Button" } %>
<%= zui("button", variant: :outline, contrast: :high) { "Button" } %>
<%= zui("button", variant: :ghost) { "Button" } %>
<%= zui("button", variant: :ghost, contrast: :high) { "Button" } %>
<%= zui("button", variant: :link) { "Button" } %>
<%= zui("button", variant: :link, contrast: :high) { "Button" } %>

<%= render(Zui::Button.new(color: :gray)) { "Button" } %>
<%= zui("button", color: :gray, contrast: :high) { "Button" } %>
<%= zui("button", color: :gray, variant: :soft) { "Button" } %>
<%= zui("button", color: :gray, variant: :soft, contrast: :high) { "Button" } %>
<%= zui("button", color: :gray, variant: :outline) { "Button" } %>
<%= zui("button", color: :gray, variant: :outline, contrast: :high) { "Button" } %>
<%= zui("button", color: :gray, variant: :ghost) { "Button" } %>
<%= zui("button", color: :gray, variant: :ghost, contrast: :high) { "Button" } %>
<%= zui("button", color: :gray, variant: :link) { "Button" } %>
<%= zui("button", color: :gray, variant: :link, contrast: :high) { "Button" } %>

<%= render(Zui::Button.new) do %>
  <%= zui_icon("plus", :s) %>
  Add
<% end %>

<%= zui('button') do %>
  <%= zui_icon("loader-2", class: "h-4 w-4 animate-spin") %>
  Loading
<% end %>


<%= zui('button') do %>
  Next
  <%= zui_icon("arrow-right", class: "h-4 w-4") %>
<% end %>

<%= zui('button', variant: :soft) do %>
  <%= zui_icon("plus", class: "h-4 w-4") %>
  Add
<% end %>

<%= zui('button', variant: :soft) do %>
  <%= zui_icon("loader-2", class: "h-4 w-4 animate-spin") %>
  Loading
<% end %>

<%= zui('button', variant: :soft) do %>
  Next
  <%= zui_icon("arrow-right", class: "h-4 w-4") %>
<% end %>

<%= zui('button', variant: :outline) do %>
  <%= zui_icon("plus", class: "h-4 w-4") %>
  Add
<% end %>

<%= zui('button', variant: :outline) do %>
  <%= zui_icon("loader-2", class: "h-4 w-4 animate-spin") %>
  Loading
<% end %>

<%= zui('button', variant: :outline) do %>
  Next
  <%= zui_icon("arrow-right", class: "h-4 w-4") %>
<% end %>

<%= render(Zui::Button.new(rounded: :none)) { "Button" } %>
<%= zui("button", rounded: :s) { "Button" } %>
<%= zui("button", rounded: :m) { "Button" } %>
<%= zui("button", rounded: :l) { "Button" } %>
<%= zui("button", rounded: :full) { "Button" } %>

<%= zui("button", variant: :soft, rounded: :none) { "Button" } %>
<%= zui("button", variant: :soft, rounded: :s) { "Button" } %>
<%= zui("button", variant: :soft, rounded: :m) { "Button" } %>
<%= zui("button", variant: :soft, rounded: :l) { "Button" } %>
<%= zui("button", variant: :soft, rounded: :full) { "Button" } %>

<%= zui("button", variant: :outline, rounded: :none) { "Button" } %>
<%= zui("button", variant: :outline, rounded: :s) { "Button" } %>
<%= zui("button", variant: :outline, rounded: :m) { "Button" } %>
<%= zui("button", variant: :outline, rounded: :l) { "Button" } %>
<%= zui("button", variant: :outline, rounded: :full) { "Button" } %>

<%= render(Zui::Button.new(size: :xs)) { "Button" } %>
<%= zui("button", size: :s) { "Button" } %>
<%= zui("button", size: :m) { "Button" } %>
<%= zui("button", size: :l) { "Button" } %>

<%= zui("button", variant: :soft, size: :xs) { "Button" } %>
<%= zui("button", variant: :soft, size: :s) { "Button" } %>
<%= zui("button", variant: :soft, size: :m) { "Button" } %>
<%= zui("button", variant: :soft, size: :l) { "Button" } %>

<%= zui("button", variant: :outline, size: :xs) { "Button" } %>
<%= zui("button", variant: :outline, size: :s) { "Button" } %>
<%= zui("button", variant: :outline, size: :m) { "Button" } %>
<%= zui("button", variant: :outline, size: :l) { "Button" } %>

<%= render(Zui::Button.new(data_zui_accent: "red")) { "Button" } %>
<%= zui("button", data_zui_accent: "green") { "Button" } %>
<%= zui("button", data_zui_accent: "yellow") { "Button" } %>