All tags/Emoji

A reaction bar

Reactions under a post, each emoji from its shortcode in a span with role img and its name as the label a screen reader says.

1 The data emoji/reactions.php php

<?php

  // The reactions a post got, by shortcode - as GitHub and Slack write them.

  $reactions = [
    [ 'code' => '+1',      'count' => 24 ],
    [ 'code' => 'tada',    'count' => 17 ],
    [ 'code' => 'heart',   'count' => 9  ],
    [ 'code' => 'rocket',  'count' => 12 ],
    [ 'code' => 'eyes',    'count' => 3  ],
    [ 'code' => 'joy',     'count' => 2  ],
  ];

?>

2 The template emoji/reactions.pad pad

<div style="max-width:30em">
  <p style="margin:0 0 14px;line-height:1.5"><strong>Release 3.0 is out</strong> - charts, tables and a faster first render.</p>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    {reactions}
    <button type="button" style="display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit;font:inherit;font-size:15px">
      {emoji $code} <span style="font-size:13px;font-variant-numeric:tabular-nums">{$count}</span>
    </button>
    {/reactions}
  </div>
</div>

3 The result rendered on the server

Release 3.0 is out - charts, tables and a faster first render.