Feedback Buttons

Quick, binary feedback controls (e.g., thumbs up/down) to capture whether AI-generated output was helpful. Use to refine AI suggestions and guide future results.

Overview

Resources

Install


yarn add @camp/feedback-buttons

Variations

Usage pattern

The current usage pattern is to use the handleThumbsUp and handleThumbsDown functions to call pendoTrackEvent or some other related callback functions to record the feedback. Then, the feedbackState should be updated to the new state and the buttons become disabled after the feedback is recorded.


import { FeedbackButtons, STATUS, type FeedbackState } from '@camp/feedback-buttons';
import { useState } from 'react';
 
const MyFeedbackButtons = () => {
  const [state, setState] = useState<FeedbackState>({
    submitted: false,
    feedback: undefined,
  });
 
  const handleThumbsUp = async () => {
    return await new Promise((resolve) =>
      resolve(console.log('pendoTrackEvent, or some other callback')),
    ).then(() => {
      const likedState: FeedbackState = {
        submitted: true,
        feedback: STATUS.LIKED,
      };
      setState(likedState);
      return likedState;
    });
  };
 
  const handleThumbsDown = async () => {
    return await new Promise((resolve) =>
      resolve(console.log('pendoTrackEvent, or some other callback')),
    ).then(() => {
      const dislikedState: FeedbackState = {
        submitted: true,
        feedback: STATUS.DISLIKED,
      };
      setState(dislikedState);
      return dislikedState;
    });
  };
 
  return (
    <FeedbackButtons
      handleThumbsUp={handleThumbsUp}
      handleThumbsDown={handleThumbsDown}
      feedbackState={state}
      disabled={state.submitted}
    />
  );
},

Default

By default, the component shows an animation when the like button is clicked. No disabled or selected states are persisted; these must be managed by the parent component.

Feedback states


import { FeedbackButtons, STATUS } from '@camp/feedback-buttons';
 
const MyFeedbackButtons = () => (
  <>
    // No feedback selected
    <FeedbackButtons feedbackState={{ submitted: false, feedback: undefined }} />
    // Thumbs up selected
    <FeedbackButtons feedbackState={{ submitted: true, feedback: STATUS.LIKED }} />
    // Thumbs down selected
    <FeedbackButtons feedbackState={{ submitted: true, feedback: STATUS.DISLIKED }} />
  </>
);

Disabled states


import { FeedbackButtons } from '@camp/feedback-buttons';
 
const MyFeedbackButtons = () => <FeedbackButtons disabled />;

Customizing icon wrappers

The component allows for customizing the icon wrappers for the liked and disliked states. This is useful for adding a tooltip or other wrapping element around the icon.

The renderLikedIcon and renderDislikedIcon props receive one argument which is the default icon component for the liked and disliked states respectively, and should return a React Node.


// Customizing icon wrappers
<FeedbackButtons
  feedbackState={{ submitted: true, feedback: STATUS.LIKED }}
  handleThumbsUp={async () => ({ submitted: true, feedback: STATUS.LIKED })}
  handleThumbsDown={async () => ({ submitted: true, feedback: STATUS.DISLIKED })}
  renderLikedIcon={(Icon) => (
    <Tooltip content="Like">
      <Icon />
    </Tooltip>
  )}
  renderDislikedIcon={(Icon) => (
    <Tooltip content="Dislike">
      <Icon />
    </Tooltip>
  )}
/>

Accessibility

Keyboard support

Tab: Moves focus to each feedback button.
Enter/Space: Activates the focused button.