Reactions
`<pura-reactions>` groups `<pura-reaction>` pills (toggle buttons with `aria-pressed`); clicking a pill turns the user's reaction on/off and increments or decrements the counter, emitting a `react` event. Use it for emoji-style reactions on posts, comments, or messages. It is agent-native: each bar and pill registers itself in `window.__puraReactions` (keyed by `data-pura-id`) and mirrors the state in `data-pura-reaction-*` and `data-pura-reactions-count`/`data-pura-reactions-active` attributes, letting agents enumerate, read, and trigger reactions via `toggle()`.
Preview
<pura-reactions label="Post reactions" id="rx">
<pura-reaction emoji="👍" count="12" label="Like" active></pura-reaction>
<pura-reaction emoji="❤️" count="8" label="Love"></pura-reaction>
<pura-reaction emoji="🎉" count="3" label="Celebrate"></pura-reaction>
<pura-reaction emoji="🤔" count="1" label="Thinking"></pura-reaction>
</pura-reactions>
<script type="module">
document.getElementById("rx").addEventListener("react", (e) => {
const { emoji, active, count } = e.detail;
console.log(`${emoji} ${active ? "activated" : "deactivated"} (total: ${count})`);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | "Reactions" | On <pura-reactions>: accessible label for the group (aria-label). |
emoji | string | "" | On <pura-reaction>: the emoji glyph displayed (e.g., "👍"). Empty if absent. |
count | integer | 0 | On <pura-reaction>: current counter (reflected). Hidden when zero. |
active | boolean | false | On <pura-reaction>: indicates the user reacted; pill highlighted with aria-pressed=true. |
label | string | (emoji) | On <pura-reaction>: optional accessible label for the reaction (e.g., "Like"). Falls back to the emoji if absent. |
disabled | boolean | false | On <pura-reaction>: makes the pill non-interactive. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/reactions.js"></script>import "./pura/lib/reactions.js";