Button Group

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

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app 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) { "Previous" } %>
  <%= ui_button(variant: :outline) { "Next" } %>
<% end %>

Exemplos

Padrão

Dois botões unidos em um grupo horizontal.

<%= ui_button_group do %>
  <%= ui_button(variant: :outline) { ui_icon("chevron-left") + "Previous" } %>
  <%= ui_button(variant: :outline) { "Next" + ui_icon("chevron-right") } %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`ButtonGroup`	`orientation`	`:horizontal`	Junta os botões numa linha (`:horizontal`) ou numa coluna (`:vertical`).
`ButtonGroup::Text`	`tag`	`:div`	O elemento renderizado; use `:label` para nomear um input do grupo.
`ButtonGroup::Separator`	`orientation`	`:vertical`	`:vertical` entre botões numa linha, `:horizontal` numa coluna.