shadcn-rails

Badge

Displays a badge or a component that looks like a badge.

No JavaScript Required
Badge
badge/default 
<%= render Shadcn::Badge.new do %>
  Badge
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add badge

Usage

<%= render Shadcn::Badge.new do %>
  Badge
<% end %>

Examples

Default

Badge
badge/default 
<%= render Shadcn::Badge.new do %>
  Badge
<% end %>

<%= render Shadcn::Badge.new do %>
  Badge
<% end %>

Secondary

Secondary
badge/secondary 
<%= render Shadcn::Badge.new(variant: :secondary) do %>
  Secondary
<% end %>

<%= render Shadcn::Badge.new(variant: :secondary) do %>
  Secondary
<% end %>

Destructive

Destructive
badge/destructive 
<%= render Shadcn::Badge.new(variant: :destructive) do %>
  Destructive
<% end %>

<%= render Shadcn::Badge.new(variant: :destructive) do %>
  Destructive
<% end %>

Outline

Outline
badge/outline 
<%= render Shadcn::Badge.new(variant: :outline) do %>
  Outline
<% end %>

<%= render Shadcn::Badge.new(variant: :outline) do %>
  Outline
<% end %>

All Variants

Default Secondary Destructive Outline 
<div class="flex flex-wrap gap-2">
  <%= render Shadcn::Badge.new { "Default" } %>
  <%= render Shadcn::Badge.new(variant: :secondary) { "Secondary" } %>
  <%= render Shadcn::Badge.new(variant: :destructive) { "Destructive" } %>
  <%= render Shadcn::Badge.new(variant: :outline) { "Outline" } %>
</div>

Common Use Cases

Status: Active
Version: v2.0.0
Draft: Draft
Error: Failed 
<div class="flex flex-wrap gap-4">
  <div class="flex items-center gap-2">
    <span class="text-sm font-medium">Status:</span>
    <%= render Shadcn::Badge.new { "Active" } %>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm font-medium">Version:</span>
    <%= render Shadcn::Badge.new(variant: :outline) { "v2.0.0" } %>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm font-medium">Draft:</span>
    <%= render Shadcn::Badge.new(variant: :secondary) { "Draft" } %>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm font-medium">Error:</span>
    <%= render Shadcn::Badge.new(variant: :destructive) { "Failed" } %>
  </div>
</div>

Collection

Secondary
badge/collection 
<%= render Shadcn::Badge.new(variant: :secondary) do %>
  Secondary
<% end %>

API Reference

API Reference

Prop Type Default Description
variant Symbol :default Badge style variant (:default, :secondary, :destructive, :outline)
class_name String nil Additional CSS classes to apply

Accessibility

  • Badges are purely visual and don't convey semantic meaning to screen readers
  • If badges represent important status information, ensure the context provides that information in an accessible way
  • Consider using aria-label or visually hidden text for important statuses