shadcn-rails

Badge

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

No JavaScript Required
Badge

Installation

Add the component to your project:

rails generate shadcn:component badge

Usage

<%= render Shadcn::BadgeComponent.new { "Badge" } %>

Examples

Default

Default

Secondary

Secondary 
<%= render Shadcn::BadgeComponent.new(variant: :secondary) { "Secondary" } %>

Destructive

Destructive 
<%= render Shadcn::BadgeComponent.new(variant: :destructive) { "Destructive" } %>

Outline

Outline 
<%= render Shadcn::BadgeComponent.new(variant: :outline) { "Outline" } %>

All Variants

Default Secondary Destructive Outline

Common Use Cases

Status: Active
Version: v2.0.0
Draft: Draft
Error: Failed

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