New
Usage
<%= ui.badge "Label" %>
<%= ui.badge "Success", variant: :success %>
<%= ui.badge "Warning", variant: :warning, size: :md %>
<%= ui.badge "99+", rounded: true %>Block contentText or HTML content for the badge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | Symbol:default | :info | :error | :success | :warning | :default | Visual style of the badge. |
size | Symbol:xs | :sm | :md | :lg | :sm | Size of the badge. |
rounded | Boolean | false | When true, renders the badge with fully rounded (pill) corners instead of rounded-md. |
Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.
Examples
Sizes
Default XS
Default SM
Default MD
Default LG
<%= ui.badge "Default XS", size: :xs %>
<%= ui.badge "Default SM", size: :sm %>
<%= ui.badge "Default MD", size: :md %>
<%= ui.badge "Default LG", size: :lg %>Variants
Default
Info
Warning
Success
Error
<%= ui.badge "Default", variant: :default %>
<%= ui.badge "Info", variant: :info %>
<%= ui.badge "Warning", variant: :warning %>
<%= ui.badge "Success", variant: :success %>
<%= ui.badge "Error", variant: :error %>Rounded (pill style)
2
5
8
12
<%= ui.badge "2", size: :xs, rounded: true %>
<%= ui.badge "5", size: :sm, rounded: true %>
<%= ui.badge "8", size: :md, rounded: true %>
<%= ui.badge "12", size: :lg, rounded: true %>