Sections

Badges

Razor

Figma

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

Styles

Section titled Styles

Default

Section titled Default

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 counts

Section titled Badge counts

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.

Number counts

Section titled Number counts

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.

Icon badges

Section titled Icon badges

<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.

Badge states

Section titled Badge states

<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>

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.

Filled badges

Section titled Filled badges

<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.

User badges

Section titled User badges

<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.

Badge sizes

Section titled Badge sizes

<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.