Sections

Badges

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

Styles

Default

<span class="s-badge">
    default
</span>

default

General

Section titled General

A general-purpose badge used for functional information and system-level status updates.

<span class="s-badge">
    <span class="s-bling s-bling__filled">
        <span class="v-visible-sr">Badge</span>
    </span>
    general
</span>

Badge general

Reputation

Section titled Reputation

A reputation badge to display a user’s total rep count.

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

Rep badge 99 rep

Activity

Section titled Activity

An activity badge to signal real-time events and draw attention.

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

Activity badge new message

Achievement

Section titled Achievement

Badges that provides information about user achievements.

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

Example	Class	Description
gold badge Great Question	`.s-badge` > `.s-bling__gold`	Gold badge achievement that a user earns within a community.
silver badge Favorite Question	`.s-badge` > `.s-bling__silver`	Silver badge achievement that a user earns within a community.
bronze badge Altruist	`.s-badge` > `.s-bling__bronze`	Bronze badge achievement that a user earns within a community.

Tag

Section titled Tag

Badges that display achievements a user has earned for their contributions within a specific topic/tag.

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

States

Section titled States

Use State badges to communicate semantic status or severity, such as success, warning, or danger. These variants apply specific system colors to convey meaning and can be configured with or without icons.

Note: Avoid using icons in the small variant unless a dedicated small icon size is available.

<span class="s-badge">
    @Svg.Document
    Archived
</span>
<span class="s-badge s-badge__info">
    @Svg.Compose
    Draft
</span>
<span class="s-badge s-badge__warning">
    @Svg.Eye
    Review
</span>
<span class="s-badge s-badge__danger">
    @Svg.Flag
    Closed
</span>
<span class="s-badge s-badge__critical">
    @Svg.Challenge
    Deleted
</span>
<span class="s-badge s-badge__tonal">
    @Svg.Key
    Pinned
</span>
<span class="s-badge s-badge__success">
    @Svg.Check
    Success
</span>
<span class="s-badge s-badge__featured">
    @Svg.Star
    New
</span>

Example	Class	Description
Archived Archived	`.s-badge`	Neutral badge styling. Can be used to indicate an inactive state that requires minimal visual emphasis.
Draft Draft	`.s-badge` `.s-badge__info`	Info badge styling.
Review Review	`.s-badge` `.s-badge__warning`	Warning badge styling.
Closed Closed	`.s-badge` `.s-badge__danger`	Danger badge styling.
Deleted Deleted	`.s-badge` `.s-badge__critical`	Critical badge styling.
Pinned Pinned	`.s-badge` `.s-badge__tonal`	Tonal badge styling.
Success Success	`.s-badge` `.s-badge__success`	Success badge styling.
New New	`.s-badge` `.s-badge__featured`	Featured badge styling. Can be used to draw attention to the new features and changes

Squared

Section titled Squared

Use the squared variant sparingly to provide additional emphasis, reserving it primarily for states related to gamification or achievements.

<span class="s-badge s-badge__squared s-badge__success">
    @Svg.Check
    Accepted answer
</span>
<span class="s-badge s-badge__squared s-badge__featured">
    @Svg.VoteUp
    Earn badge
</span>

Example	Class	Description
Accepted answer	`.s-badge` `.s-badge__success` `.s-badge__squared`	Success badge styling in squared variant.
Earn badge	`.s-badge` `.s-badge__featured` `.s-badge__squared`	Featured badge styling in squared variant.

Important

Section titled Important

Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user.

<span class="s-badge s-badge__warning s-badge__squared s-badge__important">
    @Svg.Notification
    Needs attention
</span>
<span class="s-badge s-badge__danger s-badge__important">
    @Svg.VoteUp
    Ending soon
</span>
<span class="s-badge s-badge__critical s-badge__important">
    Spam
</span>
<span class="s-badge s-badge__info s-badge__sm s-badge__important">
    +100
</span>

Example	Class	Description
Needs attention	`.s-badge` `.s-badge__squared` `.s-badge__warning` `.s-badge__important`	Warning badge styling in squared variant with important styling.
Ending soon	`.s-badge` `.s-badge__danger` `.s-badge__important`	Danger badge styling with important styling.
Spam	`.s-badge` `.s-badge__critical` `.s-badge__important`	Critical badge styling with important styling.
+100	`.s-badge` `.s-badge__info` `.s-badge__important`	Info badge styling in small size with important styling.

User

Section titled User

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

Sizes

Section titled Sizes

Badges come in three sizes.

<span class="s-badge s-badge__sm">
    Small
</span>
<span class="s-badge">
    Default
</span>
<span class="s-badge s-badge__lg">
    Large
</span>

Examples	Class	Description
Small	`.s-badge` `.s-badge__sm`	The badge in small size.
Default	`.s-badge`	The badge in default size.
Large	`.s-badge` `.s-badge__lg`	The badge in large size.