Button Group

Junta visualmente uma sequência de botões, colapsando bordas e cantos internos.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add button-group --yes

O item button-group do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/button_group_component.rb
app/components/ui/button_group/text_component.rb
app/components/ui/button_group/separator_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/button_group_helper.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_button_group do %>
  <%= ui_button(variant: :outline) { "Anterior" } %>
  <%= ui_button(variant: :outline) { "Próximo" } %>
<% end %>

Exemplos

Padrão

Dois botões unidos em um grupo horizontal.

<%= ui_button_group do %>
  <%= ui_button(variant: :outline) { ui_icon("chevron-left") + "Anterior" } %>
  <%= ui_button(variant: :outline) { "Próximo" + ui_icon("chevron-right") } %>
<% end %>