Badges

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

Classes

Class	Description	Modifies
`.s-badge`	Base badge element.	N/A
`.s-badge__gold`	Badge indicating a gold award.	`.s-badge`
`.s-badge__silver`	Badge indicating a silver award.	`.s-badge`
`.s-badge__bronze`	Badge indicating a bronze award.	`.s-badge`
`.s-badge__important`	Applies important styling to the badge.	`.s-badge`
`.s-badge__squared`	Applies a background color to the badge's icon.	`.s-badge`
`.s-badge__info`	Badge indicating an info status.	`.s-badge`
`.s-badge__warning`	Badge indicating a warning status.	`.s-badge`
`.s-badge__danger`	Badge indicating a danger status.	`.s-badge`
`.s-badge__critical`	Badge indicating a critical status.	`.s-badge`
`.s-badge__tonal`	Badge indicating a tonal status.	`.s-badge`
`.s-badge__success`	Badge indicating a success status.	`.s-badge`
`.s-badge__featured`	Badge indicating a featured status.	`.s-badge`
`.s-badge__sm`	Applies a small size to the badge.	`.s-badge`
`.s-badge__lg`	Applies a large size to the badge.	`.s-badge`

Styles

Default

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

default

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

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

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

Badges that provide 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	Description
gold badge Great Question	Gold badge achievement that a user earns within a community.
silver badge Favorite Question	Silver badge achievement that a user earns within a community.
bronze badge Altruist	Bronze badge achievement that a user earns within a community.

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	Modifier class	Description
python	`.s-badge__gold`	Gold badge achievement that a user earns for a specific tag within a community.
css	`.s-badge__silver`	Silver badge achievement that a user earns for a specific tag within a community.
javascript	`.s-badge__bronze`	Bronze badge achievement that a user earns for a specific tag within a community.

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.

<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	Modifier class	Description
Archived	N/A	Neutral badge styling. Can be used to indicate an inactive state that requires minimal visual emphasis.
Draft	`.s-badge__info`	Info badge styling.
Review	`.s-badge__warning`	Warning badge styling.
Closed	`.s-badge__danger`	Danger badge styling.
Deleted	`.s-badge__critical`	Critical badge styling.
Pinned	`.s-badge__tonal`	Tonal badge styling.
Success	`.s-badge__success`	Success badge styling.
New	`.s-badge__featured`	Featured badge styling. Can be used to draw attention to the new features and changes.

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	Modifier classes	Description
Accepted answer	`.s-badge__squared.s-badge__success`	Success badge styling in squared variant.
Earn badge	`.s-badge__squared.s-badge__featured`	Featured badge styling in squared variant.

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	Modifier classes	Description
Needs attention	`.s-badge__warning.s-badge__squared.s-badge__important`	Warning badge styling in squared variant with important styling.
Ending soon	`.s-badge__danger.s-badge__important`	Danger badge styling with important styling.
Spam	`.s-badge__critical.s-badge__important`	Critical badge styling with important styling.
+100	`.s-badge__info.s-badge__important`	Info badge styling in small size with important styling.

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>
<span class="s-badge s-badge__new">New</span>

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

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>

Example	Modifier class	Description
Small	`.s-badge__sm`	The badge in small size.
Default	N/A	The badge in default size.
Large	`.s-badge__lg`	The badge in large size.