Pages
Introduction Colors & Tokens Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time
app_theme v1.38.0

Badge

Small status labels. A badge is an intent (colour role) plus an optional style — subtle (default), solid, or outline — passed as one variant, e.g. :primary or :primary_outline.

Subtle (default)

Primary Secondary Danger Success Warning Info
.demo-row
  - AppTheme::INTENTS.each do |intent|
    = app_theme_badge intent.to_s.capitalize, variant: intent

Solid

Primary Secondary Danger Success Warning Info
.demo-row
  - AppTheme::INTENTS.each do |intent|
    = app_theme_badge intent.to_s.capitalize, variant: :"#{intent}_solid"

Outline

Primary Secondary Danger Success Warning Info
.demo-row
  - AppTheme::INTENTS.each do |intent|
    = app_theme_badge intent.to_s.capitalize, variant: :"#{intent}_outline"