Badge
A small count or status descriptor.
Installation
Included in poetry-ui — available as
poetry_badge
the moment you've installed Poetry,
with no per-component step. To own the source and edit it, copy it into your app:
bin/rails g poetry:add badge
Default
Open Default standalone
New
<%= poetry_badge { "New" } %>
Custom colors
Open Custom colors standalone
Blue
Green
Sky
Purple
Red
<%# One-off brand colors WITHOUT a new variant (upstream badge#custom-colors):
utility classes on class: beat the theme's base-layer variant surface,
so bg-*/text-* pairs recolor the pill per scheme. Reach for the status
variants first - this is the escape hatch for colors outside them. %>
<div class="flex flex-wrap gap-2">
<%= poetry_badge(class: "bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300") { "Blue" } %>
<%= poetry_badge(class: "bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300") { "Green" } %>
<%= poetry_badge(class: "bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300") { "Sky" } %>
<%= poetry_badge(class: "bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300") { "Purple" } %>
<%= poetry_badge(class: "bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300") { "Red" } %>
</div>
Link
Open Link standalone
<%# href: renders the badge AS a real anchor (upstream badge#link) - the
theme's [a&]:hover treatment activates, so the chip darkens on hover. %>
<%= poetry_badge(href: "#link") do %>
Open Link
<%= poetry_icon(name: :"arrow-up-right") %>
<% end %>
Status
Open Status standalone
Fulfilled
Processing
Syncing
Draft
<div class="flex flex-wrap items-center gap-2">
<%= poetry_badge(variant: :success) { "Fulfilled" } %>
<%= poetry_badge(variant: :warning) { "Processing" } %>
<%= poetry_badge(variant: :info) { "Syncing" } %>
<%= poetry_badge(variant: :outline) { "Draft" } %>
</div>
Variants
Open Variants standalone
New
Draft
Failed
Beta
<div class="flex flex-wrap items-center gap-2">
<%= poetry_badge { "New" } %>
<%= poetry_badge(variant: :secondary) { "Draft" } %>
<%= poetry_badge(variant: :destructive) { "Failed" } %>
<%= poetry_badge(variant: :outline) { "Beta" } %>
</div>
With icon
Open With icon standalone
Verified
Featured
Action needed
<div class="flex flex-wrap items-center gap-2">
<%= poetry_badge(variant: :success) do %>
<%= poetry_icon(name: :"circle-check") %>
Verified
<% end %>
<%= poetry_badge(variant: :secondary) do %>
<%= poetry_icon(name: :star) %>
Featured
<% end %>
<%= poetry_badge(variant: :destructive) do %>
<%= poetry_icon(name: :"circle-alert") %>
Action needed
<% end %>
</div>
With spinner
Open With spinner standalone
Syncing
Deploying
<%# The badge is a flex row, so DOM order picks the spinner's side -
leading on the first pill, trailing on the second; the theme's gap
and [&>svg] sizing apply either way. %>
<div class="flex flex-wrap items-center gap-2">
<%= poetry_badge(variant: :info) do %>
<%= poetry_spinner(label: "Syncing") %>
Syncing
<% end %>
<%= poetry_badge(variant: :secondary) do %>
Deploying
<%= poetry_spinner(label: "Deploying") %>
<% end %>
</div>
API
Poetry::Ui::Badge::Component — options are
constructor keywords (the poetry_* helper forwards them);
slots are composed inside the block. Generated from the gem's source documentation.
| Option | Type | Details | Description |
|---|---|---|---|
| variant: | Symbol | one of: default, secondary, destructive, outline, ghost, link, success, warning, info; defaults to :default |
The intent axis; success/warning/info are the soft record-status treatments. |
| href: | String | Renders the pill as a real <a> - a navigational chip; the theme's link hover treatments activate on exactly this element. |
Styling
Every part carries a stable data-slot attribute — target
[data-slot=…] from your own CSS to restyle it. State rides
data attributes on the parts below. This contract is verified against rendered DOM in CI.
| Part | Description |
|---|---|
| [data-slot=badge] | The status pill itself (a <span>; a real <a> when href: is given) - the whole component is this one element |
State attributes
| Part | Attribute | Condition | Values |
|---|---|---|---|
| badge | data-variant | always - the resolved variant | default · secondary · destructive · outline · ghost · link · success · warning · info |