Badge

A compact label for status, categories and short counters.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add badge --yes

The badge registry item installs these files:

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

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

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

Or render Ui::BadgeComponent directly:

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

Examples

Variants

Use variants to signal priority, state or category.

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>

API reference

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

Argument	Type	Default	Description
`variant`	Symbol/String	`:default`	`:default`, `:secondary`, `:destructive` or `:outline`.
`tag`	Symbol	`:span`	The element to render; `:a` with `href:` for a badge that links. Hover styles apply to links only.
`class` / `class_name`	String	`nil`	Extra classes.
`**attrs`	Hash	`{}`	Free-form HTML attributes for the element.