Shadwire
Componentes

Button

Exibe um botão ou um elemento que se parece com um botão.

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 --yes

O item button do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/button_component.rb
  • app/helpers/ui/button_helper.rb
  • vendor/shadwire/shadwire.css

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

Uso

Use o helper ui_button em qualquer view — ele aceita os mesmos argumentos do componente. 

<%= ui_button { "Salvar" } %>
<%= ui_button(variant: :outline, size: :sm) { "Cancelar" } %>

Ou renderize o componente Ui::ButtonComponent diretamente: 

<%= render Ui::ButtonComponent.new(variant: :destructive) do %>
  Excluir
<% end %>

Exemplos

Padrão

A variante padrão, usada para a ação primária da tela.

<%= ui_button { "Button" } %>

Secundário

Uma alternativa de menor ênfase para ações secundárias.

<%= ui_button(variant: :secondary) { "Secondary" } %>

Destrutivo

Para ações destrutivas, como excluir um registro.

<%= ui_button(variant: :destructive) { "Destructive" } %>

Contorno

Apenas borda, sem preenchimento — boa para ações neutras.

<%= ui_button(variant: :outline) { "Outline" } %>

Ghost

Sem fundo nem borda até o hover.

<%= ui_button(variant: :ghost) { "Ghost" } %>

Ícone

Botão quadrado só com ícone (size: :icon). Informe label: no ícone para leitores de tela.

<%= ui_button(size: :icon, variant: :secondary) do %>
  <%= ui_icon("chevron-right", label: "Próximo") %>
<% end %>

Com ícone

Componha ui_icon dentro do bloco; o botão dimensiona o SVG automaticamente.

<%= ui_button do %>
  <%= ui_icon("download") %>
  Baixar
<% end %>

Tamanhos

Os tamanhos :sm, :default e :lg lado a lado.

<%= ui_button(size: :sm) { "Small" } %>
<%= ui_button(size: :default) { "Default" } %>
<%= ui_button(size: :lg) { "Large" } %>

Carregando

Estado de carregamento composto com um ícone giratório e disabled.

<%= ui_button(variant: :outline, disabled: true) do %>
  <%= ui_icon("loader-circle", class: "animate-spin") %>
  Carregando
<% end %>

Desabilitado

Passe disabled: true como atributo HTML.

<%= ui_button(disabled: true) { "Disabled" } %>

Referência da API

ui_button(**options, &block) encapsula Ui::ButtonComponent.new(**options).

Argumento Tipo Padrão Descrição
variant Symbol :default :default, :secondary, :destructive, :outline, :ghost, :link
size Symbol :default :default, :sm, :lg, :icon
tag Symbol :button Tag HTML renderizada (ex.: :button, :a).
disabled Boolean false Renderiza data-disabled. Em tag: :button, também renderiza disabled por padrão.
focusable_when_disabled Boolean false Com disabled: true, mantém o botão nativo focável com aria-disabled="true" e tabindex="0" em vez de disabled.
class / class_name String nil Classes extras, mescladas após as classes de variante e tamanho.
**attrs Hash {} Atributos HTML livres (href, data:, aria:, …).
&block Block — Conteúdo do botão — texto e/ou ui_icon.