Badge
Badges are used to highlight status, categories, or counts.
Default Badges
Use the variant prop to change the badge color.
Default
Primary
Success
Warning
Danger
Info
<%= render Rvk::BadgeComponent.new(variant: :default).with_content("Default") %>
<%= render Rvk::BadgeComponent.new(variant: :primary).with_content("Primary") %>
<%= render Rvk::BadgeComponent.new(variant: :success).with_content("Success") %>Pill Badges
Add pill: true for fully rounded badges.
Primary
Success
Warning
Danger
Info
<%= render Rvk::BadgeComponent.new(variant: :primary, pill: true).with_content("Primary") %>Sizes
Badges come in 3 sizes: sm, md (default), and lg.
Small
Medium
Large
<%= render Rvk::BadgeComponent.new(variant: :primary, size: :sm).with_content("Small") %>
<%= render Rvk::BadgeComponent.new(variant: :primary, size: :lg).with_content("Large") %>With Icons
Combine with IconComponent for icon badges.
Approved
Pending
Rejected
<%= render Rvk::BadgeComponent.new(variant: :success) do %>
<%= render Rvk::IconComponent.new(name: :check, size: :xs) %>
Approved
<% end %>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | Symbol | :default | Badge style: :default, :primary, :success, :warning, :danger, :info |
| size | Symbol | :md | Badge size: :sm, :md, :lg |
| pill | Boolean | false | Use fully rounded pill style |