Button Group
Accent
<%= render(Zui::ButtonGroup.new) do |group| %> <%= group.button { "One" } %> <%= group.button { "Two" } %> <%= group.button { "Three" } %> <% end %> <%= zui('button_group') do |group| %> <%= group.button { "Raw" } %> <%= group.button { zui_icon("copy") } %> <%= link_to root_path do %> <%= group.button { zui_icon("download") } %> <% end %> <% end %> <%= zui('button_group') do |group| %> <%= link_to root_path do %> <%= group.button { zui_icon("chevron-left") } %> <% end %> <%= link_to root_path do %> <%= group.button { zui_icon("chevron-right") } %> <% end %> <% end %>
Gray
<%= render(Zui::ButtonGroup.new(color: :gray)) do |group| %> <%= group.button { "One" } %> <%= group.button { "Two" } %> <%= group.button { "Three" } %> <% end %> <%= zui('button_group',color: :gray) do |group| %> <%= group.button { "Raw" } %> <%= group.button { zui_icon("copy") } %> <%= link_to root_path do %> <%= group.button { zui_icon("download") } %> <% end %> <% end %> <%= zui('button_group',color: :gray) do |group| %> <%= link_to root_path do %> <%= group.button { zui_icon("chevron-left") } %> <% end %> <%= link_to root_path do %> <%= group.button { zui_icon("chevron-right") } %> <% end %> <% end %>
Dropdown
<%= render(Zui::ButtonGroup.new(size: :s)) do |group| %> <%= group.button do %> <%= zui_icon("star", :s) %> <span>Star</span> <%= render(Zui::Badge.new) { "100" } %> <% end %> <%= render(Zui::Dropdown.new) do |dd| %> <%= dd.trigger do %> <%= group.button do %> <%= zui_icon("chevrons-down", class: "h-4 w-4 text-accent-text") %> <% end %> <% end %> <%= dd.body do |body| %> <%= body.title {"My Account"} %> <%= body.separator %> <%= body.item(icon: "user") { "Profile" } %> <%= body.item(icon: "settings") { "Settings" } %> <%= body.item(icon: "credit-card") { "Billing" } %> <%= body.separator %> <%= body.item(icon: "users") { "Team" } %> <%= body.item(icon: "user-plus") { "Add user" } %> <%= body.separator %> <%= body.item(icon: "log-out") { link_to "Home", root_path } %> <% end %> <% end %> <% end %>
Sizes
<%= render(Zui::ButtonGroup.new(size: :s)) do |group| %> <%= group.button { "Raw" } %> <%= group.button { zui_icon("copy", :s) } %> <%= link_to root_path do %> <%= group.button { zui_icon("download", :s) } %> <% end %> <% end %> <%= render(Zui::ButtonGroup.new(size: :m)) do |group| %> <%= group.button { "Raw" } %> <%= group.button { zui_icon("copy", :s) } %> <%= link_to root_path do %> <%= group.button { zui_icon("download", :s) } %> <% end %> <% end %>
Arguments
| Argument | Values | Default | Notes |
|---|---|---|---|
| color | :accent, :gray | :accent | |
| size | :s, :m | :m |