Skip to main content

Badges are labels used for flags, earned achievements, and number totals.

Achievement badges that a user earns within a community.

<span class="s-badge">
<span class="s-award-bling s-award-bling__gold">
Great Question
</span>
</span>
<span class="s-badge">
<span class="s-award-bling s-award-bling__silver">
Favorite Question
</span>
</span>
<span class="s-badge">
<span class="s-award-bling s-award-bling__bronze">
Altruist
</span>
</span>
Example Class Description
Great Question
.s-badge
Gold badge achievement that a user earns within a community.
Favorite Question
.s-badge
Silver badge achievement that a user earns within a community.
Altruist
.s-badge
Bronze badge achievement that a user earns within a community.

Badge that displays the total number of badges of a type a user has earned.

<span class="s-badge s-badge__gold">
<span class="s-award-bling s-award-bling__gold">
635
</span>
</span>
<span class="s-badge s-badge__silver">
<span class="s-award-bling s-award-bling__silver">
7624
</span>
</span>
<span class="s-badge s-badge__bronze">
<span class="s-award-bling s-award-bling__bronze">
8234
</span>
</span>
Example Class Description
635
.s-badge .s-badge__gold
Badge which displays the total number of gold badges a user has earned.
7624
.s-badge .s-badge__silver
Badge which displays the total number of silver badges a user has earned.
8234
.s-badge .s-badge__bronze
Badge which displays the total number of bronze badges a user has earned.

Badge that display a number value related to an action or state.

<span class="s-badge s-badge__bounty">+100</span>
<span class="s-badge s-badge__votes">38</span>
<span class="s-badge s-badge__answered">154</span>
<span class="s-badge s-badge__rep">+15</span>
<span class="s-badge s-badge__rep-down">-2</span>
<span class="s-badge s-badge__important">99+</span>
Example Class Description
+100
.s-badge .s-badge__bounty
Badge which notes that a user has offered a reward for an answer to their question.
15
.s-badge .s-badge__votes
Badge which notes the total number of votes (upvotes minus downvotes) a user's post has earned.
154
.s-badge .s-badge__answered
Badge which notes the total number of votes (upvotes minus downvotes) a user's post has earned and signifies that their post was the accepted answer.
+15
.s-badge .s-badge__rep
Badge which notes reputation points earned.
-2
.s-badge .s-badge__rep-down
Badge which notes reputation points taken away.
99+
.s-badge .s-badge__important
Badge which notes important activity.
<span class="s-badge s-badge__icon">@Svg.Filter Filtered</span>
Example Class Description
Filtered
.s-badge .s-badge__icon
Adds some margin overrides that apply to an icon within a badge.
<span class="s-badge s-badge__icon s-badge__info">
@Svg.PencilSm Draft
</span>
<span class="s-badge s-badge__icon s-badge__warning">
@Svg.EyeSm Review
</span>
<span class="s-badge s-badge__icon s-badge__muted">
@Svg.ArchiveSm Archived
</span>
<span class="s-badge s-badge__icon s-badge__danger">
@Svg.NotInterestedSm Closed
</span>
<span class="s-badge s-badge__new">New</span>
Example Class Description
Draft
.s-badge .s-badge__info
Information badge styling. Can be used to indicate e.g. a draft state.
Review
.s-badge .s-badge__warning
Warning badge styling. Can be used to indicate e.g. a review state.
Archived
.s-badge .s-badge__muted
Muted badge styling. Can be used to indicate e.g. an archived state.
Closed
.s-badge .s-badge__danger
Danger badge styling. Can be used to indicate e.g. a closed state.
new
.s-badge .s-badge__new
New badge styling. Can be used to draw attention to new features and changes.
<span class="s-badge s-badge__icon s-badge__muted s-badge__filled">
@Svg.TackSm Pinned
</span>
<span class="s-badge s-badge__icon s-badge__danger s-badge__filled">
@Svg.TrashSm Deleted
</span>
Example Class Description
Pinned
.s-badge .s-badge__muted .s-badge__filled
Filled muted badge styling. Can be used to indicate e.g. pinned item.
Deleted
.s-badge .s-badge__danger .s-badge__filled
Filled danger badge styling. Can be used to indicate e.g. a deleted item.
<span class="s-badge s-badge__admin">Admin</span>
<span class="s-badge s-badge__admin s-badge__sm">Admin</span>
<span class="s-badge s-badge__admin s-badge__xs">Admin</span>
<span class="s-badge s-badge__moderator">Moderator</span>
<span class="s-badge s-badge__moderator s-badge__sm">Mod</span>
<span class="s-badge s-badge__moderator s-badge__xs">Mod</span>
<span class="s-badge s-badge__staff">Staff</span>
<span class="s-badge s-badge__staff s-badge__sm">Staff</span>
<span class="s-badge s-badge__staff s-badge__xs">Staff</span>
Examples Class Description
Admin Admin Admin
.s-badge .s-badge__admin
Badge indicating user is an admin.
Moderator Mod Mod
.s-badge .s-badge__moderator
Badge indicating user is an moderator.
Staff Staff Staff
.s-badge .s-badge__staff
Badge indicating user is staff.
<span class="s-badge">Regular</span>
<span class="s-badge s-badge__sm">Small</span>
<span class="s-badge s-badge__xs">Extra small</span>
Example Class Description
Regular
.s-badge
Default sized badge.
Small
.s-badge .s-badge__sm
Small sized badge.
Extra small
.s-badge .s-badge__xs
Extra small sized badge.
Deploys by Netlify