Components / Badge

Badge

Stable

status

Default Secondary Success Warning Destructive Outline

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../badge_example.html.erb

<div class="flex flex-wrap items-center justify-center gap-2">
  <%= render(Senren::BadgeComponent.new(variant: :default))     { "Default" } %>
  <%= render(Senren::BadgeComponent.new(variant: :secondary))   { "Secondary" } %>
  <%= render(Senren::BadgeComponent.new(variant: :success))     { "Success" } %>
  <%= render(Senren::BadgeComponent.new(variant: :warning))     { "Warning" } %>
  <%= render(Senren::BadgeComponent.new(variant: :destructive)) { "Destructive" } %>
  <%= render(Senren::BadgeComponent.new(variant: :outline))     { "Outline" } %>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal

bin/rails senren:add badge

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal

bin/rails generate senren:component badge --no-client

At a glance #

Category Data

Class name Senren::BadgeComponent

Stimulus —

Variants default, secondary, success, warning, destructive, outline

Depends on —

Pairs with card, table, avatar

Source #

app/components/senren/badge_component.html.erb

<%= tag.span content, **root_attrs("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium") %>

app/components/senren/badge_component.rb

# frozen_string_literal: true

module Senren
  class BadgeComponent < BaseComponent
    VARIANTS = {
      default: 'bg-[hsl(var(--senren-secondary))] text-[hsl(var(--senren-secondary-foreground))]',
      secondary: 'bg-[hsl(var(--senren-muted))] text-[hsl(var(--senren-muted-foreground))]',
      success: 'bg-[hsl(var(--senren-success))] text-[hsl(var(--senren-success-foreground))]',
      warning: 'bg-[hsl(var(--senren-warning))] text-[hsl(var(--senren-warning-foreground))]',
      destructive: 'bg-[hsl(var(--senren-destructive))] text-[hsl(var(--senren-destructive-foreground))]',
      outline: 'border border-[hsl(var(--senren-border))] text-[hsl(var(--senren-foreground))]'
    }.freeze

    SIZES = { md: '' }.freeze
  end
end

AI agent rules #

Use for

+status
+priority
+counts
+tags

Avoid

-interactive actions disguised as badges

Accessibility #

Provide sufficient color contrast; do not encode meaning by color alone.

Link

Typography