Badges - ViewComponent Edition

Status indicators, labels, and tags using ViewComponent

← Back to Home

🌍 Real-World Use Cases

Practical badge implementations you'll actually use

📦 E-commerce Order Status

Order #1234

iPhone 15 Pro Max

Pending

Order #1235

MacBook Pro 14"

Processing

Order #1236

AirPods Pro

Shipped

Order #1237

Magic Keyboard

Delivered

Order #1238

iPad Pro

Cancelled 
<%= render BadgeComponent.new("Pending", variant: :yellow, dot: true) %>
<%= status_badge(:pending) %>  <!-- Helper method -->

👥 User Status & Roles

JD
Online Admin
JS

Jane Smith

[email protected]

Away Editor
MB

Mike Brown

[email protected]

Offline Viewer 
<%= render BadgeComponent.new("Online", variant: :green, dot: true, size: :xs) %>
<%= render BadgeComponent.new("Admin", variant: :purple, size: :xs, style: :solid) %>

🏷️ Content Tags (Removable)

Ruby on Rails ViewComponent Stimulus Hotwire Turbo Tailwind CSS JavaScript PostgreSQL

Click X to remove tags (each badge has its own controller)

<!-- Controller is automatically added to each removable badge -->
<%= render BadgeComponent.new("Ruby on Rails", variant: :red, removable: true) %>

📋 Task Priority Levels

Fix critical security bug

Due: Today

Urgent

Deploy new feature

Due: This week

High

Update documentation

Due: Next week

Medium

Refactor old code

Due: No deadline

Low 
<%= render BadgeComponent.new("Urgent", variant: :red, size: :sm, style: :solid) %>

💳 Subscription Plans

Basic

Free

$0/month

  • ✓ 5 projects
  • ✓ Basic support
  • ✓ 1 GB storage
Most Popular

Pro

$29

$29/month

  • ✓ Unlimited projects
  • ✓ Priority support
  • ✓ 100 GB storage

Enterprise

Custom

Custom

  • ✓ Everything in Pro
  • ✓ Dedicated support
  • ✓ Unlimited storage
<%= render BadgeComponent.new("Most Popular", variant: :blue, style: :solid) %>

🔔 Notification Badges

<button class="...">
  Messages
  <%= render BadgeComponent.new("99+", variant: :green, size: :xs, style: :solid) %>
</button>

🛍️ Product Labels

Product Image
New

Premium Headphones

$299

Product Image
50% OFF

Wireless Mouse

$80 $40

Product Image
Bestseller Limited

Mechanical Keyboard

$199

<%= render BadgeComponent.new("50% OFF", variant: :red, style: :solid) %>

📁 File Type Indicators

presentation.pdf

2.4 MB

PDF

report.docx

1.8 MB

DOC

data.xlsx

3.2 MB

XLS

archive.zip

15.7 MB

ZIP 
<%= render BadgeComponent.new("PDF", variant: :red, size: :xs, shape: :pill) %>

🎨 Component Variants

All available badge styles and options

Colors (Light Style)

Gray Blue Green Yellow Red Purple Pink Indigo Orange

Colors (Solid Style)

Gray Blue Green Yellow Red Purple Pink Indigo Orange

Sizes

Extra Small Small Medium Large

Shapes

Rounded (Default) Pill Square

With Status Dots

Active Pending Error Info

💡 API Reference

Component parameters and usage

# Basic usage
<%= render BadgeComponent.new("Text", variant: :blue) %>

# With all options
<%= render BadgeComponent.new(
  "Premium",
  variant: :blue,      # :gray, :blue, :green, :yellow, :red, :purple, :pink, :indigo, :orange
  size: :sm,           # :xs, :sm, :md, :lg
  shape: :rounded,     # :rounded, :pill, :square
  style: :light,       # :light, :solid
  dot: false,          # true/false - adds status dot
  removable: false     # true/false - adds remove button
) %>

# Helper method
<%= badge_component("Text", variant: :green) %>

# Status helper
<%= status_badge(:pending) %>  # Auto-configures color and dot