Vote

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

Classes

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

Examples

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">
        <!-- Vote16Up icon -->
        <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">
        <!-- Vote16Down icon -->
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

Base

0 vote count

Vote

≥ 1,000 votes

27.5K

Expanded

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

<div class="s-vote s-vote__expanded">
    <button class="s-vote--btn">
        <!-- Vote16Up icon -->
        <span class="v-visible-sr">upvote</span>
    </button>
    <span 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>
    </span>
    <button class="s-vote--btn">
        <!-- Vote16Down icon -->
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

+12 20 -8

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 for scenarios such as comment voting, where a more compact design is preferred.

<!-- Upvote only — count inside button -->
<div class="s-vote s-vote__horizontal">
    <button class="s-vote--btn">
        <!-- Vote16Up icon -->
        <span class="v-visible-sr">upvote</span>
        <span class="s-vote--votes">
            <span class="s-vote--total">5</span>
        </span>
    </button>
</div>

<!-- With downvote — count between buttons -->
<div class="s-vote s-vote__horizontal">
    <button class="s-vote--btn">
        <!-- Vote16Up icon -->
        <span class="v-visible-sr">upvote</span>
    </button>
    <span class="s-vote--votes">
        <span class="s-vote--total">10</span>
    </span>
    <button class="s-vote--btn">
        <!-- Vote16Down icon -->
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

Voted

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

<!-- Upvoted -->
<div class="s-vote">
    <button class="s-vote--btn">
        <!-- Vote16UpFill icon -->
        <span class="v-visible-sr">upvoted</span>
    </button>
    <span class="s-vote--votes">
        <span class="s-vote--total">12</span>
    </span>
    <button class="s-vote--btn">
        <!-- Vote16Down icon -->
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

Upvoted

27.5K

Downvoted

Horizontal upvoted

Horizontal downvoted