Sections

Vote

The vote component allows users to vote on the quality of content by casting an upvote or downvote.

Classes

Class	Parent	Description
`.s-vote`	`N/A`	Base vote component.
`.s-vote__expanded`	`.s-vote`	Expanded vote style that shows upvote and downvote counts separately.
`.s-vote__horizontal`	`.s-vote`	Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote count.
`.s-vote--btn`	`.s-vote`	Vote button.
`.s-vote--votes`	`.s-vote`	Container for vote counts.
`.s-vote--upvotes`	`.s-vote--votes`	Upvote count.
`.s-vote--total`	`.s-vote--votes`	Total vote count.
`.s-vote--downvotes`	`.s-vote--votes`	Downvote count.

Examples

Section titled Examples

Base

Section titled Base

The base vote component includes an upvote button, a downvote button, and a vote count. When the vote count is zero and the current user has not voted, it should display Vote in place of a number. Otherwise, show the vote count and truncate large numbers (e.g., 1.2k).

<div class="s-vote">
    <button class="s-vote--btn">
        @Svg.Vote16Up
        <span class="v-visible-sr">upvote</span>
    </button>
    <span class="s-vote--votes">
        <span class="s-vote--total">12</span>
    </span>
    <button class="s-vote--btn">
        @Svg.Vote16Down
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

Base

0 vote count

Vote

≥ 1,000 votes

27.5K

Expanded

Section titled Expanded

Include the .s-vote__expanded modifier to show upvote and downvote counts in addition to the total vote count. This modifier hides .s-vote--total and shows .s-vote--upvotes and .s-vote--downvotes instead.

<div class="s-vote">
    <button class="s-vote--btn">
        @Svg.Vote16Up
        <span class="v-visible-sr">upvote</span>
    </button>
    <button class="s-vote--votes">
        <span class="s-vote--upvotes">12</span>
        <span class="s-vote--total">20</span>
        <span class="s-vote--downvotes">8</span>
    </button>
    <button class="s-vote--btn">
        @Svg.Vote16Down
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

+12 20 -8

Horizontal

Section titled Horizontal

Apply the .s-vote__horizontal modifier to arrange the vote buttons and counts in a horizontal layout. This layout does not officially support expanded vote count. This configuration is best suited scenarios such as comment voting, where a more compact design is preferred.

<!-- Standard horizontal vote component -->
<div class="s-vote s-vote__horizontal">
    <button class="s-vote--btn">
        @Svg.Vote16Up
        <span class="v-visible-sr">upvote</span>
    </button>
    <span class="s-vote--votes">
        <span class="s-vote--total">12</span>
    </span>
    <button class="s-vote--btn">
        @Svg.Vote16Down
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

<!-- Upvote only -->
<div class="s-vote s-vote__horizontal">
    <button class="s-vote--btn">
        @Svg.Vote16Up
        <span class="v-visible-sr">upvote</span>
    </button>
    <span class="s-vote--votes">
        <span class="s-vote--total">12</span>
    </span>
</div>

Horizontal

Horizontal (upvote only)

Voted

Section titled Voted

Use filled vote icons to indicate when the current user has upvoted or downvoted the content.

<div class="s-vote s-vote__horizontal">
    <button class="s-vote--btn">
        @Svg.Vote16Up
        <span class="v-visible-sr">upvote</span>
    </button>
    <span class="s-vote--votes">
        <span class="s-vote--total">12</span>
    </span>
    <button class="s-vote--btn">
        @Svg.Vote16Down
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

Upvoted

27.5K

Downvoted

Horizontal upvoted

Horizontal downvoted