Badge

UI::Badge

A small status label.

bin/rails generate velvetkit:add badge

Also adds: Icon
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

All Variants

Default Secondary Destructive Outline Success Warning

variants.html.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>

Sizes

Small Default Large

sizes.html.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>

With Icon

Verified 42 Pending

with_icon.html.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>

API

Arguments

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

Slots: with_leading_icon