On this page
All available badge variants including light, dark, and status colors.
Primary
Secondary
Success
Danger
Warning
ERB
Ruby
HTML
<%= primary_badge "Primary" %>
<%= secondary_badge "Secondary" %>
<%= success_badge "Success" %>
<%= danger_badge "Danger" %>
<%= warning_badge "Warning" %> new_primary_badge ( "Primary" )
new_secondary_badge ( "Secondary" )
new_success_badge ( "Success" )
new_danger_badge ( "Danger" )
new_warning_badge ( "Warning" ) <span class= "badge badge-primary" > Primary</span>
<span class= "badge badge-secondary" > Secondary</span>
<span class= "badge badge-success" > Success</span>
<span class= "badge badge-danger" > Danger</span>
<span class= "badge badge-warning" > Warning</span>
Fully rounded corners for a softer look. Combine badge-pill with any color variant.
Primary
Secondary
Success
Danger
Warning
ERB
Ruby
HTML
<%= primary_pill_badge "Primary" %>
<%= secondary_pill_badge "Secondary" %>
<%= success_pill_badge "Success" %>
<%= danger_pill_badge "Danger" %>
<%= warning_pill_badge "Warning" %> new_primary_pill_badge ( "Primary" )
new_secondary_pill_badge ( "Secondary" )
new_success_pill_badge ( "Success" )
new_danger_pill_badge ( "Danger" )
new_warning_pill_badge ( "Warning" ) <span class= "badge badge-primary badge-pill" > Primary</span>
<span class= "badge badge-secondary badge-pill" > Secondary</span>
<span class= "badge badge-success badge-pill" > Success</span>
<span class= "badge badge-danger badge-pill" > Danger</span>
<span class= "badge badge-warning badge-pill" > Warning</span>
X-Small
Small
Medium (Default)
Large
X-Large
ERB
Ruby
HTML
<%= primary_badge "X-Small" , class: "text-xs" %>
<%= primary_badge "Small" , class: "text-sm" %>
<%= primary_badge "Medium (Default)" %>
<%= primary_badge "Large" , class: "text-lg" %>
<%= primary_badge "X-Large" , class: "text-xl" %> new_primary_badge ( "X-Small" , class: "text-xs" )
new_primary_badge ( "Small" , class: "text-sm" )
new_primary_badge ( "Medium (Default)" )
new_primary_badge ( "Large" , class: "text-lg" )
new_primary_badge ( "X-Large" , class: "text-xl" ) <span class= "badge badge-primary text-xs" > X-Small</span>
<span class= "badge badge-primary text-sm" > Small</span>
<span class= "badge badge-primary" > Medium (Default)</span>
<span class= "badge badge-primary text-lg" > Large</span>
<span class= "badge badge-primary text-xl" > X-Large</span>
How badges look when used within headings for notifications and counts.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
ERB
Ruby
HTML
<h1 class= "typography-h1" > Example heading <%= primary_badge "New" %> </h1>
<h2 class= "typography-h2" > Example heading <%= primary_badge "New" %> </h2>
<h3 class= "typography-h3" > Example heading <%= primary_badge "New" %> </h3>
<h4 class= "typography-h4" > Example heading <%= primary_badge "New" %> </h4>
<h5 class= "typography-h5" > Example heading <%= primary_badge "New" %> </h5>
<h6 class= "typography-h6" > Example heading <%= primary_badge "New" %> </h6> <h1 class= "typography-h1" >
Example heading
<span class= "badge badge-primary" > New</span>
</h1>
<h2 class= "typography-h2" >
Example heading
<span class= "badge badge-primary" > New</span>
</h2>
<h3 class= "typography-h3" >
Example heading
<span class= "badge badge-primary" > New</span>
</h3>
<h4 class= "typography-h4" >
Example heading
<span class= "badge badge-primary" > New</span>
</h4>
<h5 class= "typography-h5" >
Example heading
<span class= "badge badge-primary" > New</span>
</h5>
<h6 class= "typography-h6" >
Example heading
<span class= "badge badge-primary" > New</span>
</h6>
How badges look when used inside buttons for counts and notifications.
Messages 12
Drafts 7
ERB
Ruby
HTML
<%= secondary_button do %>
Messages <%= success_badge 12 %>
<% end %>
<%= outline_primary_button do %>
Drafts <%= primary_badge 7 %>
<% end %> new_secondary_button ( "Messages" , new_success_badge ( 12 ))
new_outline_primary_button ( "Drafts" , new_primary_badge ( 7 )) <button class= "btn btn-secondary" >
Messages
<span class= "badge badge-success" > 12</span>
</button>
<button class= "btn btn-outline-primary" >
Drafts
<span class= "badge badge-primary" > 7</span>
</button>
Badges with arbitrary content using block syntax.
New
ERB
Ruby
HTML
<%= warning_badge do %>
<strong> New</strong>
<% end %> new_warning_badge . with_content ( tag . strong ( "New" )) <span class= "badge badge-warning" >
<strong> New</strong>
</span>
