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 Support Button
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.39.1

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"