> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# FeedbackPulse

Asks one question in place, for measuring how a change landed without sending the reader to a survey. It is deliberately small and skippable: one question, an optional comment, and a timeout that dismisses it if the reader ignores it.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/FeedbackPulse) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/overlay-feedbackpulse--overview)

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { FeedbackPulse } from '@wallarm-org/design-system/FeedbackPulse';

export const Playground = () => {
  // Open on load: the e2e test for the confirmation phase goes straight to this story and clicks
  // a score, so it depends on the card already being up.
  const [open, setOpen] = useState(true);
  return (
    <div
      style={{
        // The card is fixed to the viewport corner, not to this box, so the frame only has to
        // hold the trigger — a full viewport height here leaves the docs page mostly empty.
        display: 'flex',
        minHeight: 120,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button variant='outline' color='neutral' onClick={() => setOpen(true)}>
        Show FeedbackPulse
      </Button>
      <FeedbackPulse
        open={open}
        onOpenChange={next => setOpen(next)}
        onSubmit={onSubmit}
        data-testid='feedback-pulse'
      />
    </div>
  );
};
```

## Usage

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { FeedbackPulse } from '@wallarm-org/design-system/FeedbackPulse';
```

## Examples

### Rating

The rating scale on its own. Keep the question to something a single scale can honestly
answer.

```tsx
import { FeedbackPulse } from '@wallarm-org/design-system/FeedbackPulse';

export const Rating = () => (
  <div style={{ minHeight: '100vh' }}>
    <FeedbackPulse
      open
      onOpenChange={onOpenChange}
      onSubmit={onSubmit}
      data-testid='feedback-pulse'
    />
  </div>
);
```

[Open in Storybook](https://wallarm.github.io/design-system/storybook/?path=/story/overlay-feedbackpulse--rating)

## Props

| Prop             | Type                                                                      | Default                | Description |
| ---------------- | ------------------------------------------------------------------------- | ---------------------- | ----------- |
| open \*          | `boolean`                                                                 |                        |             |
| onOpenChange \*  | `(open: boolean, reason?: FeedbackPulseCloseReason \| undefined) => void` |                        |             |
| onSubmit \*      | `(result: { score: number; comment?: string \| undefined; }) => void`     |                        |             |
| question         | `string \| undefined`                                                     | `DEFAULT_QUESTION`     |             |
| scaleLabels      | `readonly [string, string] \| undefined`                                  | `DEFAULT_LABELS`       |             |
| showComment      | `boolean \| undefined`                                                    | `true`                 |             |
| dismissDuration  | `number \| undefined`                                                     | `DEFAULT_DISMISS_MS`   |             |
| confirmationText | `string \| undefined`                                                     | `DEFAULT_CONFIRMATION` |             |
| data-testid      | `string \| undefined`                                                     |                        |             |