Blocks

Badge

A small inline label used to highlight status, counts, or categories.

Installation

bin/rails g shadcnrb:component badge

Usage

Pass a string as the first argument or use a block. Renders a span with rounded-full pill styling.

New Beta

<!-- string arg -->
<%= sui.badge "New" %>
<!-- block form -->
<%= sui.badge do %>Beta<% end %>

Variants

Use variant: to choose a colour scheme.

Default Secondary Destructive Outline Ghost Link

<!-- variant: :default -->
<%= sui.badge "Default", variant: :default %>
<!-- variant: :secondary -->
<%= sui.badge "Secondary", variant: :secondary %>
<!-- variant: :destructive -->
<%= sui.badge "Destructive", variant: :destructive %>
<!-- variant: :outline -->
<%= sui.badge "Outline", variant: :outline %>
<!-- variant: :ghost -->
<%= sui.badge "Ghost", variant: :ghost %>
<!-- variant: :link -->
<%= sui.badge "Link", variant: :link %>

API

Prop	Type	Default	Description
`variant`	Symbol	`:default`	Colour scheme — one of `:default` `:secondary` `:destructive` `:outline` `:ghost` `:link`
`name`	String	`nil`	Label text when no block is given

Next: Avatar →