Voting buttons

Voting buttons allows visitors to vote on whether content was helpful.

Article voting

Outline buttons in a group
View code
{{#with article}}
  <div class="py-4 my-6 text-center border-top border-bottom">
    <h4 class="font-medium">
      {{t 'was_this_article_helpful'}}
    </h4>
    <div class="button-group mb-4" role="group">
      {{vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
      {{vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
    </div>
    {{vote 'label' class='block text-gray-600 font-size-sm mb-4'}}

    {{! Request callout }}
    <p class="my-5">
      {{../request_callout}}
    </p>
  </div>
{{/with}}
{{#with article}}
  <div class="py-4 my-6 text-center border-top border-bottom">
    <h4 class="font-medium">
      {{t 'was_this_article_helpful'}}
    </h4>
    <div class="mb-4" role="group">
      {{vote 'up' class='button button-primary' selected_class='is-active' role='radio'}}
      {{vote 'down' class='button button-primary' selected_class='is-active' role='radio'}}
    </div>
    {{vote 'label' class='block text-gray-600 font-size-sm mb-4'}}

    {{! Request callout }}
    <p class="my-5">
      {{../request_callout}}
    </p>
  </div>
{{/with}}
Outline buttons beside the title
View code
{{#with article}}
  <div class="py-4 my-4 text-center border-top border-bottom">
    <div class="md:flex align-items-center justify-content-center">
      <h4 class="my-4 font-medium">
        {{t 'was_this_article_helpful'}}
      </h4>
      <div class="m-4" role="group">
        {{vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
        {{vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
      </div>
    </div>
    {{vote 'label' class='block text-gray-600 font-size-md mb-4'}}
  </div>
{{/with}}
Buttons within a card
View code
{{#with article}}
  <div class="card bg-white border-top-4 border-top-primary overflow-hidden">
    <div class="row">
      <div class="col">
        <div class="p-6 text-center">
          <h3 class="my-4 font-medium">
            {{t 'was_this_article_helpful'}}
          </h3>
          <div class="m-4" role="group">
            {{vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
            {{vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
          </div>
          {{vote 'label' class='block text-gray-600 mb-4'}}
        </div>
      </div>
      <div class="hidden md:flex md:col-6">
        <div class="w-full h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80v&crop=focalpoint&w=550&h=450&q=80&fp-x=0.5&fp-y=0.4&blend-mode=multiply&blend=67a4e4&sat=-100');">
        </div>
      </div>
    </div>
  </div>
{{/with}}

The {{vote}} helper can also act as a block helper, allowing you to define the content of each vote button.

Outline buttons with icons
View code
{{#with article}}
  <div class="py-4 my-6 text-center border-top border-bottom">
    <h4 class="font-medium">
      {{t 'was_this_article_helpful'}}
    </h4>
    <div class="mb-4" role="group">
      {{#vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
        <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">
          <path d="M330,512 C261,512 152,489 126,470 C119,466 116,459 116,452 L116,234 C116,228 119,221 124,217 C126,216 165,185 206,163 C256,135 291,96 300,71 C310,41 324,0 370,0 C392,0 409,12 419,33 C438,77 418,137 384,184 C407,189 434,196 451,201 C482,211 502,233 506,260 C510,288 496,317 467,338 C445,397 408,489 380,504 C370,510 352,512 330,512 Z M161,439 C203,456 333,475 358,465 C370,454 403,379 426,316 C428,312 431,308 434,305 C453,293 462,278 461,266 C459,256 450,248 437,243 C409,234 340,219 339,219 C331,218 325,212 322,204 C319,196 321,188 327,183 C377,129 386,73 377,51 C374,45 372,45 370,45 C359,45 354,52 342,86 C329,125 282,171 227,201 C201,216 174,235 161,245 L161,439 Z M73,454 L73,232 C73,211 57,195 37,195 C16,195 0,211 0,232 L0,454 C0,474 16,490 36,490 C56,490 73,474 73,454 Z"></path>
        </svg>
      {{/vote}}
      {{#vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
        <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">
          <path d="M177,0 C247,0 355,23 382,42 C388,46 391,53 391,60 L391,278 C391,284 388,291 383,295 C381,296 342,327 302,349 C251,377 216,416 208,441 C197,471 183,512 137,512 C115,512 98,500 88,479 C69,435 89,375 123,328 C100,323 73,316 56,311 C26,301 5,279 1,252 C-3,224 11,195 41,174 C63,116 100,23 127,8 C137,2 155,0 177,0 Z M346,73 C304,56 174,37 149,47 C137,58 104,133 81,196 C79,200 76,204 73,207 C54,219 45,234 46,246 C48,256 57,264 70,269 C98,278 167,293 168,293 C176,294 182,300 185,308 C188,316 186,324 180,329 C130,383 121,439 130,461 C133,467 135,467 137,467 C148,467 153,460 165,426 C178,387 225,341 280,311 C306,296 333,277 346,267 L346,73 Z M434,58 L434,280 C434,300 450,316 470,316 C491,316 507,300 507,280 L507,58 C507,38 491,22 470,22 C450,22 434,38 434,58 Z"></path>
        </svg>
      {{/vote}}
    </div>
    {{vote 'label' class='block text-gray-600 font-size-sm mb-4'}}

    {{! Request callout }}
    <p class="my-5">
      {{../request_callout}}
    </p>
  </div>
{{/with}}
Outline buttons with colored icons
View code
{{#with article}}
  <div class="py-4 my-6 text-center border-top border-bottom">
    <h3>
      {{t 'was_this_article_helpful'}}
    </h3>
    <div class="mb-4" role="group">
      {{#vote 'up' class='button button-outline hover:text-green-500 hover:border-green-500' selected_class='text-green-500 border-green-500' role='radio'}}
        <svg class="svg-icon text-green-500 fill-current mr-2" viewBox="0 0 403 290" xmlns="http://www.w3.org/2000/svg">
          <path d="M136,290 C130,290 124,287 119,282 L8,172 C-2,162 -2,146 8,136 C18,126 33,126 44,136 L137,229 L359,8 C369,-2 385,-2 395,8 C405,18 405,33 395,43 L155,282 C149,287 143,290 136,290 Z"></path>
        </svg> Yes
      {{/vote}}
      {{#vote 'down' class='button button-outline hover:text-red-500 hover:border-red-500' selected_class='text-red-500 border-red-500' role='radio'}}
        <svg class="svg-icon text-red-500 fill-current mr-2" viewBox="0 0 290 290" xmlns="http://www.w3.org/2000/svg">
          <path d="M282,247 C292,257 292,272 282,282 C277,287 271,290 265,290 C258,290 252,287 247,282 L145,181 L43,282 C38,287 32,290 25,290 C19,290 13,287 8,282 C-2,272 -2,257 8,247 L109,145 L8,43 C-2,33 -2,18 8,8 C18,-2 33,-2 43,8 L145,109 L247,8 C257,-2 272,-2 282,8 C292,18 292,33 282,43 L181,145 L282,247 Z"></path>
        </svg> No
      {{/vote}}
    </div>
  </div>
{{/with}}
Article buttons with emojis
View code
{{#with article}}
  <div class="py-4 my-6 text-center border-top border-bottom">
    <h4>
      {{t 'was_this_article_helpful'}}
    </h4>
    <div class="mb-4" role="group">
      {{#vote 'up' class='not-a-button mx-1 cursor-pointer transition hover:grow' selected_class='scale-110' role='radio'}}
        <svg viewBox="0 0 149 148" xmlns="http://www.w3.org/2000/svg" height="28">
          <path d="M135.498,61.999 C135.498,56.332 134.8165,50.825 133.5445,45.549 C129.91,37.973 124.8695,31.195 118.7655,25.551 C107.57,18.863 94.3825,15.218 80.3795,15.7285 C41.746,17.137 11.5695,49.598 12.9775,88.2315 C13.184,93.8835 14.0625,99.351 15.521,104.568 C18.6725,110.573 22.7195,116.037 27.488,120.778 C38.434,127.8725 51.483,131.998 65.4995,131.998 C104.158,131.998 135.498,100.658 135.498,61.999 L135.498,61.999 Z M99.292,49.2 C108.0035,49.2 115.0905,55.9985 115.0905,64.9985 L107.0905,64.9985 C107.0905,60.4985 103.592,57.2 99.292,57.2 C94.992,57.2 91.4935,60.4985 91.4935,64.9985 L83.4935,64.9985 C83.4935,55.9985 90.5805,49.2 99.292,49.2 L99.292,49.2 Z M48.705,49.2 C57.4165,49.2 64.5035,55.9985 64.5035,64.9985 L56.5035,64.9985 C56.5035,60.4985 53.005,57.2 48.705,57.2 C44.405,57.2 40.9065,60.4985 40.9065,64.9985 L32.9065,64.9985 C32.9065,55.9985 39.9935,49.2 48.705,49.2 L48.705,49.2 Z M35.3385,93.941 L42.0575,89.599 C48.1695,99.0565 58.463,105.469 69.5935,106.753 C83.8735,108.4015 98.1425,101.6665 105.94,89.599 L112.6595,93.941 C104.1675,107.0825 89.335,114.9975 73.8575,114.9975 C72.135,114.9975 70.4075,114.9 68.6765,114.7 C55.1965,113.1455 42.7335,105.3855 35.3385,93.941 L35.3385,93.941 Z" fill="#FFCE00"></path>
          <path d="M133.5445,45.549 C134.8165,50.8255 135.498,56.332 135.498,61.999 C135.498,100.658 104.158,131.998 65.499,131.998 C51.483,131.998 38.4335,127.8725 27.4875,120.778 C39.4275,132.65 55.8705,139.998 73.999,139.998 C110.391,139.998 139.998,110.391 139.998,73.999 C139.998,63.818 137.679,54.1685 133.5445,45.549 L133.5445,45.549 Z" fill="#FFB100"></path>
          <path d="M80.38,15.7285 C94.383,15.218 107.5705,18.8625 118.766,25.551 C106.9925,14.664 91.2605,8 73.999,8 C37.607,8 8,37.607 8,73.999 C8,85.0235 10.721,95.4235 15.521,104.568 C14.0625,99.351 13.184,93.8835 12.9775,88.2315 C11.5695,49.598 41.746,17.137 80.38,15.7285 L80.38,15.7285 Z" fill="#FFE454"></path>
          <path d="M73.999,0 C33.196,0 0,33.196 0,73.999 C0,114.802 33.196,147.998 73.999,147.998 C114.802,147.998 147.998,114.802 147.998,73.999 C147.998,33.196 114.8025,0 73.999,0 L73.999,0 Z M73.999,139.998 C55.8705,139.998 39.4275,132.65 27.4875,120.778 C22.7195,116.037 18.672,110.573 15.5205,104.568 C10.721,95.4235 8,85.0235 8,73.999 C8,37.607 37.607,8 73.999,8 C91.2605,8 106.9925,14.664 118.7655,25.551 C124.8695,31.195 129.91,37.973 133.5445,45.549 C137.6795,54.1685 139.998,63.818 139.998,73.999 C139.998,110.391 110.391,139.998 73.999,139.998 L73.999,139.998 Z" fill="#000000"></path>
          <path d="M48.705,57.2 C53.005,57.2 56.5035,60.4985 56.5035,64.9985 L64.5035,64.9985 C64.5035,55.9985 57.4165,49.2 48.705,49.2 C39.9935,49.2 32.9065,55.9985 32.9065,64.9985 L40.9065,64.9985 C40.9065,60.4985 44.4055,57.2 48.705,57.2 L48.705,57.2 Z" fill="#000000"></path>
          <path d="M99.292,57.2 C103.592,57.2 107.0905,60.4985 107.0905,64.9985 L115.0905,64.9985 C115.0905,55.9985 108.0035,49.2 99.292,49.2 C90.5805,49.2 83.4935,55.9985 83.4935,64.9985 L91.4935,64.9985 C91.4935,60.4985 94.992,57.2 99.292,57.2 L99.292,57.2 Z" fill="#000000"></path>
          <path d="M73.8575,114.9975 C89.3345,114.9975 104.167,107.0825 112.6595,93.941 L105.94,89.599 C98.142,101.6665 83.873,108.4015 69.5935,106.753 C58.4625,105.4695 48.169,99.0565 42.0575,89.599 L35.3385,93.941 C42.7335,105.3855 55.1965,113.1455 68.6765,114.7 C70.407,114.9 72.135,114.9975 73.8575,114.9975 L73.8575,114.9975 Z" fill="#000000"></path>
        </svg>
      {{/vote}}
      {{#vote 'down' class='not-a-button mx-1 cursor-pointer transition hover:grow' selected_class='scale-110' role='radio'}}
        <svg viewBox="0 0 149 148" xmlns="http://www.w3.org/2000/svg" height="28">
          <path d="M135.498,61.999 C135.498,56.332 134.8165,50.825 133.5445,45.549 C129.91,37.973 124.8695,31.195 118.7655,25.551 C107.57,18.863 94.3825,15.218 80.38,15.729 C41.746,17.137 11.5695,49.598 12.9775,88.2315 C13.184,93.8835 14.0625,99.351 15.521,104.568 C18.6725,110.573 22.7195,116.037 27.488,120.778 C38.434,127.8725 51.483,131.998 65.4995,131.998 C104.158,131.998 135.498,100.658 135.498,61.999 L135.498,61.999 Z M98.833,49.499 C103.251,49.499 106.833,53.081 106.833,57.499 C106.833,61.917 103.251,65.499 98.833,65.499 C94.415,65.499 90.833,61.917 90.833,57.499 C90.833,53.081 94.415,49.499 98.833,49.499 L98.833,49.499 Z M49.333,49.499 C53.751,49.499 57.333,53.081 57.333,57.499 C57.333,61.917 53.751,65.499 49.333,65.499 C44.915,65.499 41.333,61.917 41.333,57.499 C41.333,53.081 44.915,49.499 49.333,49.499 L49.333,49.499 Z M43.9795,107.698 L37.663,102.788 C48.3835,88.9985 66.359,82.3995 83.4565,85.9725 C94.0875,88.196 103.633,94.168 110.3345,102.788 L104.019,107.698 C98.48,100.5735 90.5955,95.639 81.819,93.8035 C67.691,90.8485 52.8375,96.3035 43.9795,107.698 L43.9795,107.698 Z" fill="#FFCE00"></path>
          <path d="M133.5445,45.549 C134.8165,50.8255 135.498,56.332 135.498,61.999 C135.498,100.658 104.158,131.998 65.499,131.998 C51.483,131.998 38.4335,127.8725 27.4875,120.778 C39.4275,132.65 55.8705,139.998 73.999,139.998 C110.391,139.998 139.998,110.391 139.998,73.999 C139.998,63.818 137.679,54.1685 133.5445,45.549 L133.5445,45.549 Z" fill="#FFB100"></path>
          <path d="M80.38,15.7285 C94.383,15.218 107.5705,18.8625 118.7655,25.5505 C106.9925,14.664 91.2605,8 73.999,8 C37.607,8 8,37.607 8,73.999 C8,85.0235 10.721,95.4235 15.521,104.568 C14.0625,99.351 13.184,93.8835 12.9775,88.2315 C11.5695,49.598 41.746,17.137 80.38,15.7285 L80.38,15.7285 Z" fill="#FFE454"></path>
          <path d="M73.999,0 C33.196,0 0,33.196 0,73.999 C0,114.802 33.196,147.998 73.999,147.998 C114.802,147.998 147.998,114.802 147.998,73.999 C147.998,33.196 114.802,0 73.999,0 L73.999,0 Z M73.999,139.998 C55.8705,139.998 39.4275,132.65 27.4875,120.778 C22.7195,116.037 18.672,110.573 15.5205,104.568 C10.721,95.4235 8,85.0235 8,73.999 C8,37.607 37.607,8 73.999,8 C91.2605,8 106.9925,14.664 118.7655,25.551 C124.8695,31.195 129.91,37.973 133.5445,45.549 C137.6795,54.1685 139.998,63.818 139.998,73.999 C139.998,110.391 110.391,139.998 73.999,139.998 L73.999,139.998 Z" fill="#000000"></path>
          <path d="M81.819,93.8035 C90.596,95.639 98.48,100.5735 104.019,107.698 L110.3345,102.788 C103.6335,94.168 94.0875,88.196 83.4565,85.9725 C66.359,82.3995 48.3835,88.9985 37.663,102.788 L43.9795,107.698 C52.8375,96.3035 67.691,90.8485 81.819,93.8035 L81.819,93.8035 Z" fill="#000000"></path>
          <circle fill="#000000" cx="49.333" cy="57.499" r="8"></circle>
          <circle fill="#000000" cx="98.833" cy="57.499" r="8"></circle>
        </svg>
      {{/vote}}
    </div>
  </div>
{{/with}}

You can also allow visitors to only vote whether an article, post or comment was useful, adopting a “like” or “thumbs up” visual style.

Outline buttons with icons
View code
{{#with article}}
  <div class="flex align-items-center" x-data="{ likes: {{vote_sum}}, selected: $el.querySelector('.not-a-button').getAttribute('aria-pressed') === 'true' }">
    <div @click="likes = (selected ? likes - 1 : likes + 1); selected = !selected">
      {{#vote 'up' class='not-a-button flex text-red-500 cursor-pointer transition hover:grow' role='radio'}}
        <svg class="fill-current" viewBox="0 0 91 92" xmlns="http://www.w3.org/2000/svg" height="32">
          <path d="M45.269,0 C70.271,0 90.538,20.267 90.538,45.269 C90.538,70.27 70.271,90.538 45.269,90.538 C20.268,90.538 0,70.27 0,45.269 C0,20.267 20.268,0 45.269,0 Z M23.287,27.792 C17.896,33.182 17.896,41.921 23.287,47.311 L45.269,69.294 L67.251,47.311 C72.642,41.921 72.642,33.182 67.251,27.792 C61.861,22.402 53.122,22.402 47.732,27.792 L45.269,30.255 L42.806,27.792 C37.416,22.402 28.677,22.402 23.287,27.792 Z"></path>
        </svg>
      {{/vote}}
    </div>
    <div class="text-gray-600 font-size-md m-2">
      <span x-text="likes"></span> like<span :class="{ 'hidden': likes === 1 }">s</span>
    </div>
  </div>
{{/with}}

Post voting

Simple post voting buttons
View code
<div class="mb-4">
  {{#with post}}
    <div class="button-group button-group-sm" role="group">
      {{#vote 'up' class='button button-outline' selected_class ='is-active' role='radio'}}
        <svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
        </svg>
      {{/vote}}
      {{#vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
        <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
        </svg>
      {{/vote}}
    </div>
    {{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}
  {{/with}}
</div>
Comment vote buttons with chevron icons
View code
{{#with post}}
  <div class="py-4 my-6 text-center border-top border-bottom">
    <h4 class="font-medium">
      Was this post helpful?
    </h4>
    <div class="button-group mb-4" role="group">
      {{vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
      {{vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
    </div>
  </div>
{{/with}}

Comment voting

The following patterns are intended for use with comments on both Article and Post pages.

Simple comment voting buttons
View code
<div class="button-group button-group-sm" role="group">
  {{#vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
    <svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
    </svg>
  {{/vote}}
  {{#vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
    </svg>
  {{/vote}}
</div>
{{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}
Comment vote buttons with thumbs up/down icons
View code
<div class="button-group button-group-sm" role="group">
  {{#vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
    <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">
      <path d="M330,512 C261,512 152,489 126,470 C119,466 116,459 116,452 L116,234 C116,228 119,221 124,217 C126,216 165,185 206,163 C256,135 291,96 300,71 C310,41 324,0 370,0 C392,0 409,12 419,33 C438,77 418,137 384,184 C407,189 434,196 451,201 C482,211 502,233 506,260 C510,288 496,317 467,338 C445,397 408,489 380,504 C370,510 352,512 330,512 Z M161,439 C203,456 333,475 358,465 C370,454 403,379 426,316 C428,312 431,308 434,305 C453,293 462,278 461,266 C459,256 450,248 437,243 C409,234 340,219 339,219 C331,218 325,212 322,204 C319,196 321,188 327,183 C377,129 386,73 377,51 C374,45 372,45 370,45 C359,45 354,52 342,86 C329,125 282,171 227,201 C201,216 174,235 161,245 L161,439 Z M73,454 L73,232 C73,211 57,195 37,195 C16,195 0,211 0,232 L0,454 C0,474 16,490 36,490 C56,490 73,474 73,454 Z"></path>
    </svg>
  {{/vote}}
  {{#vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
    <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">
      <path d="M177,0 C247,0 355,23 382,42 C388,46 391,53 391,60 L391,278 C391,284 388,291 383,295 C381,296 342,327 302,349 C251,377 216,416 208,441 C197,471 183,512 137,512 C115,512 98,500 88,479 C69,435 89,375 123,328 C100,323 73,316 56,311 C26,301 5,279 1,252 C-3,224 11,195 41,174 C63,116 100,23 127,8 C137,2 155,0 177,0 Z M346,73 C304,56 174,37 149,47 C137,58 104,133 81,196 C79,200 76,204 73,207 C54,219 45,234 46,246 C48,256 57,264 70,269 C98,278 167,293 168,293 C176,294 182,300 185,308 C188,316 186,324 180,329 C130,383 121,439 130,461 C133,467 135,467 137,467 C148,467 153,460 165,426 C178,387 225,341 280,311 C306,296 333,277 346,267 L346,73 Z M434,58 L434,280 C434,300 450,316 470,316 C491,316 507,300 507,280 L507,58 C507,38 491,22 470,22 C450,22 434,38 434,58 Z"></path>
    </svg>
  {{/vote}}
</div>
{{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}

Use .media to present vertical vote buttons beside the comment body.

Vertical comment vote buttons
View code
<div class="button-group-vertical button-group-sm" role="group">
  {{#vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
    <svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
    </svg>
  {{/vote}}
  <span class="button text-gray-600">1</span>
  {{#vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
    </svg>
  {{/vote}}
</div>

Using voting patterns

Voting button build upon the {{vote}} helpers available on the Article page and Community Post page. You can use them to allow users to vote on articles and post, or comments added to either.

Article voting

Article voting patterns can be used anywhere on the Article page (article_page.hbs) that has access to the article object. Simply copy and paste the code of your selected pattern into the position you’d like it to appear on the page.

Post voting

Post voting button patterns can be used anywhere on the Community Post page (community_post_page.hbs) that has access to the post object. Simply copy and paste the code of your selected pattern into the position you’d like it to appear on the page.

Unlike on the Article page, there is no translated text available for a heading or a {{request_callout}} helper, but you can add your own custom translated text using dynamic content when localizing your theme.

Comment voting

Comment voting patterns are designed to be used within a comment loop on the Article and Community Post pages.

{{#each comments}}
  // Add your selected pattern code within this loop
{{/each}}

Related patterns