Sections

Badges

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

Styles

Default

Achievement and activity badges that a user receives within a community.

<span class="s-badge">
    <span class="s-bling s-bling__filled s-bling__gold">
        <span class="v-visible-sr">Gold badge</span>
    </span>
    Great Question
</span>
<span class="s-badge">
    <span class="s-bling s-bling__filled s-bling__silver">
        <span class="v-visible-sr">Silver badge</span>
    </span>
    Favorite Question
</span>
<span class="s-badge">
    <span class="s-bling s-bling__filled s-bling__bronze">
        <span class="v-visible-sr">Bronze badge</span>
    </span>
    Altruist
</span>
<span class="s-badge">
    <span class="s-bling s-bling__filled">
        <span class="v-visible-sr">Badge</span>
    </span>
    general
</span>
<span class="s-badge">
    <span class="s-bling s-bling__filled s-bling__rep">
        <span class="v-visible-sr">Rep badge</span>
    </span>
    99 rep
</span>
<span class="s-badge">
    <span class="s-bling s-bling__filled s-bling__activity">
        <span class="v-visible-sr">Activity badge</span>
    </span>
    new message
</span>

Example	Class	Description
gold badge Great Question	`.s-badge`	Gold badge achievement that a user earns within a community.
silver badge Favorite Question	`.s-badge`	Silver badge achievement that a user earns within a community.
bronze badge Altruist	`.s-badge`	Bronze badge achievement that a user earns within a community.
badge general	`.s-badge`	A general badge used for numbers, flags, achievements, or other.
rep badge 99 rep	`.s-badge`	A “rep” badge used for general reputation points.
activity badge new message	`.s-badge`	An activity badge to signal real-time events and draw attention.

Tag badges

Section titled Tag badges

Achievement badges that a user receives for a specific tag within a community.

<span class="s-badge s-badge__gold">
    <span class="s-bling s-bling__gold">
        <span class="v-visible-sr">Gold tag badge</span>
    </span>
    python
</span>
<span class="s-badge s-badge__silver">
    <span class="s-bling s-bling__silver">
        <span class="v-visible-sr">Silver tag badge</span>
    </span>
    css
</span>
<span class="s-badge s-badge__bronze">
    <span class="s-bling s-bling__bronze">
        <span class="v-visible-sr">Bronze tag badge</span>
    </span>
    javascript
</span>

Example	Class	Description
gold tag badge python	`.s-badge` `.s-badge__gold`	Gold badge achievement that a user earns for a specific tag within a community.
silver tag badge css	`.s-badge` `.s-badge__silver`	Silver badge achievement that a user earns for a specific tag within a community.
bronze tag badge javascript	`.s-badge` `.s-badge__bronze`	Bronze badge achievement that a user earns for a specific tag within a community.

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

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__moderator">Moderator</span>
<span class="s-badge s-badge__staff">Staff</span>
<span class="s-badge s-badge__bot">Bot</span>
<span class="s-badge s-badge__ai">AI</span>

Examples	Class	Description
Admin	`.s-badge` `.s-badge__admin`	Badge indicating user is an admin.
Moderator	`.s-badge` `.s-badge__moderator`	Badge indicating user is an moderator.
Staff	`.s-badge` `.s-badge__staff`	Badge indicating user is staff.
AI	`.s-badge` `.s-badge__ai`	Badge indicating content is AI generated.
Bot	`.s-badge` `.s-badge__bot`	Badge indicating user is a bot.

Badge sizes

Section titled Badge sizes

Badges come in three sizes.

<span class="s-badge s-badge__sm s-badge__bronze">
    <span class="s-bling s-bling__sm s-bling__bronze">
        <span class="v-visible-sr">Bronze tag badge</span>
    </span>
    Small
</span>
<span class="s-badge s-badge__silver">
    <span class="s-bling s-bling__silver">
        <span class="v-visible-sr">Silver tag badge</span>
    </span>
    Default
</span>
<span class="s-badge s-badge__lg s-badge__gold">
    <span class="s-bling s-bling__lg s-bling__gold">
        <span class="v-visible-sr">Gold tag badge</span>
    </span>
    Large
</span>

<span class="s-badge s-badge__sm">
    <span class="s-bling s-bling__sm s-bling__filled s-bling__bronze">
        <span class="v-visible-sr">Bronze badge</span>
    </span>
    Small
</span>
<span class="s-badge">
    <span class="s-bling s-bling__filled s-bling__silver">
        <span class="v-visible-sr">Silver badge</span>
    </span>
    Default
</span>
<span class="s-badge s-badge__lg">
    <span class="s-bling s-bling__lg s-bling__filled s-bling__gold">
        <span class="v-visible-sr">Gold badge</span>
    </span>
    Large
</span>

Base	Filled	Class	Description
Bronze tag badge Small	Bronze badge Small	`.s-badge` `.s-badge__sm` `.s-badge__bronze`	The bronze badge variants in small size.
Silver tag badge Default	Silver badge Default	`.s-badge` `.s-badge__silver`	The silver badge variants in default size.
Gold tag badge Large	Gold badge Large	`.s-badge` `.s-badge__lg` `.s-badge__gold`	The gold badge variants in large size.