Badge

Um rótulo compacto para status, categorias e contadores curtos.

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

O item badge do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/badge_component.rb
app/helpers/ui/badge_helper.rb
vendor/shadwire/shadwire.css

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

Uso

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

Ou renderize Ui::BadgeComponent diretamente:

<%= render Ui::BadgeComponent.new(variant: :outline) do %>
  Outline
<% end %>

Exemplos

Variantes

Use as variantes para indicar prioridade, estado ou categoria.

Badge Secondary Destructive Outline

<div class="flex flex-wrap items-center gap-2">
  <%= ui_badge { "Badge" } %>
  <%= ui_badge(variant: :secondary) { "Secondary" } %>
  <%= ui_badge(variant: :destructive) { "Destructive" } %>
  <%= ui_badge(variant: :outline) { "Outline" } %>
</div>

Referência da API

ui_badge(**options, &block) encapsula Ui::BadgeComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`variant`	Symbol/String	`:default`	`:default`, `:secondary`, `:destructive` ou `:outline`.
`tag`	Symbol	`:span`	O elemento renderizado; `:a` com `href:` para um badge que é link. Os estilos de hover valem só para links.
`class` / `class_name`	String	`nil`	Classes extras.
`**attrs`	Hash	`{}`	Atributos HTML livres para o elemento.