Vote

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

Svelte Figma

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

Classes

Class	Parent	Modifies	Description
`.s-vote`	N/A	N/A	Base vote component.
`.s-vote--btn`	`.s-vote`	N/A	Vote button.
`.s-vote--votes`	`.s-vote`	N/A	Container for vote counts.
`.s-vote--downvotes`	`.s-vote--votes`	N/A	Downvote count.
`.s-vote--total`	`.s-vote--votes`	N/A	Total vote count.
`.s-vote--upvotes`	`.s-vote--votes`	N/A	Upvote count.
`.s-vote__expanded`	N/A	`.s-vote`	Expanded vote style that shows upvote and downvote counts separately.
`.s-vote__horizontal`	N/A	`.s-vote`	Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote 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 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">
        @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 for scenarios such as comment voting, where a more compact design is preferred.

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

<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">10</span>
    </span>
    <button class="s-vote--btn">
        @Svg.Vote16Down
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

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.Vote16UpFill
        <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">
        @Svg.Vote16Down
        <span class="v-visible-sr">downvote</span>
    </button>
</div>

Upvoted

27.5K

Downvoted

Horizontal upvoted

Horizontal downvoted