Link Button
Accent
<%= render(Zui::LinkButton.new(href: "#")) { "Link" } %> <%= zui("link_button", contrast: :high, href: "#") { "Link" } %> <%= zui("link_button", variant: :soft, href: "#") { "Link" } %> <%= zui("link_button", variant: :soft, contrast: :high, href: "#") { "Link" } %> <%= zui("link_button", variant: :outline, href: "#") { "Link" } %> <%= zui("link_button", variant: :outline, contrast: :high, href: "#") { "Link" } %> <%= zui("link_button", variant: :ghost, href: "#") { "Link" } %> <%= zui("link_button", variant: :ghost, contrast: :high, href: "#") { "Link" } %> <%= zui_link_button_to "Link", "#", zb_variant: :link %> <%= zui_link_button_to "Link", "#", zb_variant: :link, zb_contrast: :high %>
Gray
<%= render(Zui::LinkButton.new(color: :gray, href: "#")) { "Button" } %> <%= zui("link_button", color: :gray, contrast: :high, href: "#") { "Link" } %> <%= zui("link_button", color: :gray, variant: :soft, href: "#") { "Link" } %> <%= zui("link_button", color: :gray, variant: :soft, contrast: :high, href: "#") { "Link" } %> <%= zui("link_button", color: :gray, variant: :outline, href: "#") { "Link" } %> <%= zui("link_button", color: :gray, variant: :outline, contrast: :high, href: "#") { "Link" } %> <%= zui("link_button", color: :gray, variant: :ghost, href: "#") { "Link" } %> <%= zui("link_button", color: :gray, variant: :ghost, contrast: :high, href: "#") { "Link" } %> <%= zui_link_button_to "Link", "#", zb_variant: :link, zb_color: :gray %> <%= zui_link_button_to "Link", "#", zb_variant: :link, zb_contrast: :high, zb_color: :gray %>
Icons
<%= render(Zui::LinkButton.new(href: "#")) do %> <%= zui_icon("plus", class: "h-4 w-4") %> Add <% end %> <%= zui('link_button', href: '#') do %> <%= zui_icon("loader-2", class: "h-4 w-4 animate-spin") %> Loading <% end %> <%= zui('link_button', href: '#') do %> Next <%= zui_icon("arrow-right", class: "h-4 w-4") %> <% end %> <%= zui('link_button', href: '#', variant: :soft) do %> <%= zui_icon("plus", class: "h-4 w-4") %> Add <% end %> <%= zui('link_button', href: '#', variant: :soft) do %> <%= zui_icon("loader-2", class: "h-4 w-4 animate-spin") %> Loading <% end %> <%= zui('link_button', href: '#', variant: :soft) do %> Next <%= zui_icon("arrow-right", class: "h-4 w-4") %> <% end %> <%= zui('link_button', href: '#', variant: :outline) do %> <%= zui_icon("plus", class: "h-4 w-4") %> Add <% end %> <%= zui('link_button', href: '#', variant: :outline) do %> <%= zui_icon("loader-2", class: "h-4 w-4 animate-spin") %> Loading <% end %> <%= zui_link_button_to("#", zb_variant: :outline) do %> Next <%= zui_icon("arrow-right", class: "h-4 w-4") %> <% end %>
Rounded
<%= render(Zui::LinkButton.new(rounded: :none, href: '#')) {"Link" } %> <%= zui("link_button", rounded: :s, href: '#') {"Link" } %> <%= zui("link_button", rounded: :m, href: '#') {"Link" } %> <%= zui("link_button", rounded: :l, href: '#') {"Link" } %> <%= zui("link_button", rounded: :full, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, rounded: :none, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, rounded: :s, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, rounded: :m, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, rounded: :l, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, rounded: :full, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, rounded: :none, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, rounded: :s, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, rounded: :m, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, rounded: :l, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, rounded: :full, href: '#') {"Link" } %>
Sizes
<%= render(Zui::LinkButton.new(size: :xs, href: '#')) {"Link" } %> <%= zui("link_button", size: :s, href: '#') {"Link" } %> <%= zui("link_button", size: :m, href: '#') {"Link" } %> <%= zui("link_button", size: :l, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, size: :xs, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, size: :s, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, size: :m, href: '#') {"Link" } %> <%= zui("link_button", variant: :soft, size: :l, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, size: :xs, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, size: :s, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, size: :m, href: '#') {"Link" } %> <%= zui("link_button", variant: :outline, size: :l, href: '#') {"Link" } %>
Arguments
Argument | Values | Default | Notes |
---|---|---|---|
variant | :soft, :solid, :outline, :ghost, :link | :solid | |
color | :accent, :gray | :accent | |
contrast | :regular, :high | :regular | |
rounded | :none, :s, :m, :l, :full | :s | |
size | :xs, :s, :m, :l | :s | Not valid for :link variant |