Reaction Reference | Sentiment and Content Testing Surveys

Reaction is an icon-based quick survey with three built-in reaction sets: expressive faces, thumbs up/down, and a heart. It captures sentiment on content, designs, or copy with a single tap.

@sensefolks/reaction

How It Works

Reaction shows one of three icon sets: five expressive faces, thumbs up and down, or a single heart. Users tap once to react and tap again to undo. Submission happens immediately.

Reactions persist in localStorage so returning visitors see prior selections. Configure the mode in your dashboard.

When to Use Reaction

Embed Reaction wherever you want quick, low-friction sentiment data:

Blog posts and articles — Gauge reader sentiment
Feature announcements — Measure excitement or concern
Help docs — Thumbs up/down for helpfulness
Product pages — Heart or like for social proof
Release notes — Quick read on how updates land

Installation

CDN (Recommended)

html

<!-- Modern browsers (ES modules) -->
<script type="module" src="https://unpkg.com/@sensefolks/[email protected]/dist/sf-reaction/sf-reaction.esm.js"></script>

<!-- Legacy browsers -->
<script nomodule src="https://unpkg.com/@sensefolks/[email protected]/dist/sf-reaction/sf-reaction.js"></script>

NPM

bash

npm install @sensefolks/reaction

Framework Integration

HTML

html

<sf-reaction 
  survey-key="your-survey-uuid"
  thank-you-message="Thanks for your feedback!">
</sf-reaction>

React

jsx

import '@sensefolks/reaction';

function App() {
  return (
    <sf-reaction 
      survey-key="your-survey-uuid"
      thank-you-message="Thanks for your feedback!">
    </sf-reaction>
  );
}

For Vue + Nuxt, Angular, Svelte, and Astro examples, see the Embedding Tutorial.

API Reference

Properties

Property	Attribute	Type	Default	Description
`surveyKey`	`survey-key`	string	—	Required. UUID of the reaction survey from your dashboard
`thankYouMessage`	`thank-you-message`	string	—	Overrides the thank-you message shown after submission
`sessionData`	—	Record<string, string \| number \| boolean>	{}	Typed Session Data matching the schema declared in Response Context

Events

Event	Detail	Description
`sfReady`	`{ surveyKey, reactionMode, reactionCount }`	Fired when the survey config has loaded
`sfSubmit`	`{ surveyKey, selectedReaction, action }`	Fired on create, update, or delete of a reaction
`sfError`	`{ surveyKey, errorType, errorMessage }`	Fired on load or submit errors

Reaction Modes

Configure the mode in your dashboard. Each mode offers a different level of granularity:

Dashboard label	Config value	Icons	Best for
Expressive	`expressive`	`sentiment_extremely_dissatisfied`, `sentiment_dissatisfied`, `sentiment_neutral`, `sentiment_satisfied`, `sentiment_very_satisfied`	Detailed sentiment on content or announcements
Thumbs up and down	`thumbsUpDown`	`thumb_up`, `thumb_down`	Simple helpful/not helpful on docs or support content
Favourite (heart)	`favourite`	`favorite`	Lightweight "like" for social proof or bookmarking

Default reactions use Google Material Symbols in the displayed left-to-right order. Unselected reactions are outlined; selection swaps only that icon to its filled form. The default colors follow the SenseFolks palette and can be overridden with the Reaction color properties below. Google Material Symbols are available under the Apache License 2.0.

Styling

CSS Custom Properties

Customize the component by setting CSS custom properties on the element or a parent:

Property	Default	Description
`--sf-primary`	`#005fcc`	Primary brand color
`--sf-primary-hover`	`#0047a3`	Primary hover color
`--sf-text-primary`	`#111827`	Primary text color
`--sf-text-secondary`	`#6b7280`	Secondary/muted text color
`--sf-error-color`	`#dc2626`	Error state color
`--sf-card-bg`	`#ffffff`	Card background color
`--sf-card-border`	`#d1d5db`	Card border color
`--sf-card-radius`	`8px`	Card border radius
`--sf-button-radius`	`6px`	Button border radius
`--sf-transition`	`150ms ease`	Transition timing
`--sf-reaction-icon-size`	`32px`	Size of reaction icons
`--sf-reaction-highlight-bg`	`rgba(0, 95, 204, 0.12)`	Background highlight for the selected reaction
`--sf-reaction-very-dissatisfied-color`	`#991b1b`	Very dissatisfied icon color
`--sf-reaction-dissatisfied-color`	`#8a3a00`	Dissatisfied icon color
`--sf-reaction-neutral-color`	`#665700`	Neutral icon color
`--sf-reaction-satisfied-color`	`#256326`	Satisfied icon color
`--sf-reaction-very-satisfied-color`	`#14532d`	Very satisfied icon color
`--sf-reaction-thumbs-color`	`#5b21b6`	Thumbs up and down icon color
`--sf-reaction-favourite-color`	`#991b1b`	Heart icon color (`favourite` mode)

CSS Parts

Style the component externally using ::part():

Part	Description
`container`	Host element wrapper
`reaction-container`	Main reaction group wrapper
`reactions-row`	Flex row of reaction buttons
`reaction-item`	Individual reaction button
`reaction-item-active`	Active/selected state (additive with reaction-item)
`reaction-icon`	Icon wrapper (default and SVG types)
`reaction-emoji`	Emoji or icon glyph inside each reaction
`reaction-emoji-highlight`	Highlight layer behind the selected reaction
`reaction-label`	Text label below each reaction
`button`	Generic button base
`retry-button`	"Try again" button on error
`message`	Shared part on all status text
`loading-message`	Loading state text
`completion-message`	Completion message shown after submission
`error-message`	Error state text
`error-container`	Error wrapper with retry button
`branding`	Branding container
`branding-link`	Branding anchor
`branding-logo`	Branding SVG logo
`announcements`	Screen reader live region

Styling Example

css

sf-reaction {
  --sf-primary: #7c3aed;
  --sf-text-secondary: #4b5563;
  --sf-reaction-icon-size: 40px;
  --sf-reaction-highlight-bg: rgba(124, 58, 237, 0.12);
  --sf-reaction-thumbs-color: #4c1d95;
  --sf-reaction-favourite-color: #7f1d1d;
}

sf-reaction::part(reaction-item) {
  padding: 0.75rem;
  border-radius: 12px;
}

sf-reaction::part(reaction-item-active) {
  background-color: rgba(124, 58, 237, 0.1);
}

sf-reaction::part(reaction-label) {
  font-weight: 500;
}

Accessibility

Each reaction button uses aria-pressed to convey toggle state
Live region announces selection changes to screen readers
Keyboard accessible (Tab to navigate, Enter/Space to toggle)
Focus indicators and high contrast mode support
Respects prefers-reduced-motion

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
IE11	Supported (ES5 build)