Interface ThumbsFeedbackBlockProps

Creates a thumbs feedback component for user feedback collection.

Displays two buttons (thumbs up and thumbs down) that users can click to provide feedback.

Param: props

Configuration object

Param: props.name

The name of the thumbs feedback component in the state

Param: props.onThumbsUpClick

Callback function called when thumbs up is clicked

Param: props.onThumbsDownClick

Callback function called when thumbs down is clicked

Param: props.disabled

Whether the component is disabled

Param: props.className

Additional CSS class name

Returns

A JSX element representing the thumbs feedback component

Example

Basic usage

thumbsFeedback({
  name: 'userFeedback',
  onThumbsUpClick: () => console.log('Thumbs up!'),
  onThumbsDownClick: () => console.log('Thumbs down!')
});

Example

Usage with disabled state

thumbsFeedback({
  name: 'feedback',
  disabled: true,
  onThumbsUpClick: () => {},
  onThumbsDownClick: () => {}
});

Example

Usage inside a group for feedback in success states

bubble([
  group([
    completion({
      title: 'Task completed successfully',
      description: 'All operations have been completed.'
    }),
    thumbsFeedback({
      name: 'feedback',
      onThumbsUpClick: async () => {
        await ctx.telemetry?.sendEvent('THUMBS_FEEDBACK', {
          feedback: 'ThumbsUpFeedback'
        });
      },
      onThumbsDownClick: async () => {
        await ctx.telemetry?.sendEvent('THUMBS_FEEDBACK', {
          feedback: 'ThumbsDownFeedback'
        });
      }
    })
  ])
]);
interface ThumbsFeedbackBlockProps {
    buttonTexts?: {
        dismiss?: string;
    };
    className?: string;
    disabled?: boolean;
    name?: string;
    onDismissClick?: (() => void);
    onThumbsDownClick?: (() => void);
    onThumbsUpClick?: (() => void);
    resolve?: boolean;
}

Hierarchy

  • Omit<ThumbsFeedbackProps, "resolve">
    • ThumbsFeedbackBlockProps

Properties

buttonTexts? className? disabled? name? onDismissClick? onThumbsDownClick? onThumbsUpClick? resolve?

Properties

OptionalbuttonTexts

buttonTexts?: {
    dismiss?: string;
}

Button texts

OptionalclassName

className?: string

Custom CSS class name

Optionaldisabled

disabled?: boolean

Whether the component is disabled

Optionalname

name?: string

Optional name for state management

OptionalonDismissClick

onDismissClick?: (() => void)

Callback when dismiss is clicked

OptionalonThumbsDownClick

onThumbsDownClick?: (() => void)

Callback when thumbs down is clicked

OptionalonThumbsUpClick

onThumbsUpClick?: (() => void)

Callback when thumbs up is clicked

Optionalresolve

resolve?: boolean

Whether the component should resolve the UI when a button is clicked. Defaults to true.

Settings

On This Page

Properties