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 o seu app e passa a ser seu. Instale com a CLI:

shadwire add button --yes

O item button do registry instala estes arquivos:

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

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

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

Ou renderize o componente Ui::ButtonComponent diretamente:

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

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

<%= ui_button { "Button" } %>

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

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

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

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

Só a borda, sem preenchimento, para ações neutras.

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

Sem fundo nem borda até o hover.

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

Aparência de link de texto, mantendo a semântica de botão.

<%= ui_button(variant: :link) { "Link" } %>

Um botão quadrado só com ícone (size: :icon). Passe label: no ícone para os leitores de tela.

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

Coloque um ui_icon dentro do bloco e o botão ajusta o tamanho do SVG.

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

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

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

Um estado de carregamento: um ícone girando, com o botão desabilitado.

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

Passe disabled: true como atributo HTML.

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

Renderize como <a> com tag: :a, mantendo o visual de botão.

<%= ui_button(tag: :a, href: "#", variant: :outline) { "Go to the dashboard" } %>

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`	A tag HTML renderizada (por exemplo `:button` ou `: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	—	O conteúdo do botão: texto, um `ui_icon` ou os dois.