# VelvetKit

## Badge (`UI::Badge`)

A small status label.

Add it: `bin/rails generate velvetkit:add badge`

Also adds: `icon`

### Arguments

```ruby
UI::Badge.new(variant: :default, size: :default, class: nil, **html_attrs)
```

Slots: `with_leading_icon`

### Example: All Variants

```erb
<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Badge.new(variant: :default)) { "Default" } %>
  <%= render(UI::Badge.new(variant: :secondary)) { "Secondary" } %>
  <%= render(UI::Badge.new(variant: :destructive)) { "Destructive" } %>
  <%= render(UI::Badge.new(variant: :outline)) { "Outline" } %>
  <%= render(UI::Badge.new(variant: :success)) { "Success" } %>
  <%= render(UI::Badge.new(variant: :warning)) { "Warning" } %>
</div>
```

### Example: Sizes

```erb
<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Badge.new(size: :sm)) { "Small" } %>
  <%= render(UI::Badge.new(size: :default)) { "Default" } %>
  <%= render(UI::Badge.new(size: :lg)) { "Large" } %>
</div>
```

### Example: With Icon

```erb
<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Badge.new) do |badge| %>
    <% badge.with_leading_icon(name: "badge-check") %>
    Verified
  <% end %>
  <%= render(UI::Badge.new(variant: :success)) do |badge| %>
    <% badge.with_leading_icon(name: "circle-check") %>
    42
  <% end %>
  <%= render(UI::Badge.new(variant: :warning)) do |badge| %>
    <% badge.with_leading_icon(name: "circle-alert") %>
    Pending
  <% end %>
</div>
```