add skippable feedback step and rename textButtonLabel to textButtonSendLabel

adds textButtonSkipLabel and a skip button to the follow-up feedback screen,
mirroring the existing email collection step. renames textButtonLabel to
textButtonSendLabel for consistency with contactButtonSendLabel/contactButtonSkipLabel.

Author: ovionlogis

CHANGELOG.md

@@ -10,9 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - **Optional email collection** - New `collectContact`, `userId`, `contactQuestion`, `contactSubtext`, `contactButtonSendLabel`, and `contactButtonSkipLabel` props add an optional email collection screen before the success screen. Skipped automatically when `userId` is already known. New `onContactSubmit` event fires when a respondent submits an email.
+- **Skippable feedback step** - New `textButtonSkipLabel` prop adds a Skip button to the follow-up feedback screen, mirroring the email collection step. Skipping (or submitting with empty input) advances to the next screen without calling `onFeedbackSubmit`.
 
 ### Changed
 
+- **BREAKING: `textButtonLabel` renamed to `textButtonSendLabel`** - Aligns naming with the new `textButtonSkipLabel` and the existing `contactButtonSendLabel`/`contactButtonSkipLabel` pair. Update your prop usage:
+  ```tsx
+  <CSAT5Survey textButtonSendLabel="Send" textButtonSkipLabel="Skip" />
+  ```
 - **Feedback and label styling** - Added a focus outline to choice checkboxes, fixed font inheritance and checkmark proportions in feedback inputs, and prevented label overflow with `box-sizing: border-box`.
 
 ## [1.6.1] - 2026-07-10

README.md

@@ -102,7 +102,8 @@ import 'react-feedback-surveys/index.css';
   maxLabel="Very satisfied"
   responseType="text"
   textQuestion="We'd love to hear your thoughts — what can we improve?"
-  textButtonLabel="Send"
+  textButtonSendLabel="Send"
+  textButtonSkipLabel="Skip"
   thankYouMessage="Thanks for your feedback!"
   onScoreSubmit={({ value }) => {/* ... */}}
   onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -131,7 +132,8 @@ import 'react-feedback-surveys/index.css';
   question="Are you satisfied with the result?"
   responseType="text"
   textQuestion="We'd love to hear your thoughts — what can we improve?"
-  textButtonLabel="Send"
+  textButtonSendLabel="Send"
+  textButtonSkipLabel="Skip"
   thankYouMessage="Thank you for your feedback!"
   onScoreSubmit={({ value }) => {/* ... */}}
   onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -164,7 +166,8 @@ import 'react-feedback-surveys/index.css';
   maxLabel="Very likely"
   responseType="text"
   textQuestion="We'd love to hear your thoughts — what can we improve?"
-  textButtonLabel="Send"
+  textButtonSendLabel="Send"
+  textButtonSkipLabel="Skip"
   thankYouMessage="Thank you for your feedback!"
   onScoreSubmit={({ value }) => {/* ... */}}
   onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -195,7 +198,8 @@ import 'react-feedback-surveys/index.css';
   maxLabel="Very easy"
   responseType="text"
   textQuestion="We'd love to hear your thoughts — what can we improve?"
-  textButtonLabel="Send"
+  textButtonSendLabel="Send"
+  textButtonSkipLabel="Skip"
   thankYouMessage="Thank you for your feedback!"
   onScoreSubmit={({ value }) => {/* ... */}}
   onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -297,7 +301,8 @@ Most props are shared across all survey widgets. Each widget differs only in its
 | `maxLabel`         | `string`                      | -        | Right label for the scale.                                                   |
 | `responseType`     | `null \| 'text' \| 'choices'` | -        | Enables optional follow-up feedback.                                         |
 | `textQuestion`     | `string`                      | -        | Follow-up question displayed when `responseType` is defined.                 |
-| `textButtonLabel`  | `string`                      | -        | Submit label for the feedback screen.                                        |
+| `textButtonSendLabel`  | `string`                      | -        | Submit label for the feedback screen.                                        |
+| `textButtonSkipLabel`  | `string`                      | -        | Skip label for the feedback screen.                                          |
 | `choiceOptions`    | `string[] \| null`            | -        | Predefined choices (when `responseType === 'choices'`).                      |
 | `thankYouMessage`  | `string`                      | required | Message shown after submission.                                              |
 | `collectContact`     | `boolean`                     | -        | Enables an optional email collection step before the success screen.         |
@@ -367,6 +372,8 @@ The actual `value` returned depends on the survey type:
 Invoked when the user completes the follow-up step and submits their feedback (only applies when `responseType` is `text` or `choices`).  
 This callback provides both the original score and the user's input.
 
+The feedback step is always optional: respondents can submit feedback or skip it via the `textButtonSkipLabel` button (or by submitting with empty input), and either action advances to the next screen. `onFeedbackSubmit` only fires when feedback text or choices are actually submitted; it is **not** called when the step is skipped.
+
 **Arguments:**
 - `value: number` — the same score previously passed to `onScoreSubmit`
 - `text: string | string[]` — depends on `responseType`:

docs/assets/ces7.png

@@ -72,7 +72,7 @@
 }
 
 .textarea {
-  height: 192px;
+  height: 120px;
   padding: 8px 12px;
 }
 
@@ -94,14 +94,6 @@
   &:focus {
     outline: 4px solid hsl(var(--_color-outline) / 14%);
   }
-
-  &.invalid {
-    border-color: hsl(var(--_color-error) / 100%);
-
-    &:focus {
-      outline-color: hsl(var(--_color-error) / 14%);
-    }
-  }
 }
 
 .submit {
@@ -112,6 +104,25 @@
   width: 100%;
 }
 
+.skip {
+  @include resetButton;
+
+  margin-top: 8px;
+  display: block;
+  width: 100%;
+  padding: 4px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: center;
+  color: hsl(var(--_color-muted) / 100%);
+  cursor: pointer;
+
+  &:hover {
+    color: hsl(var(--_color-text) / 100%);
+  }
+}
+
 .success {
   padding: 16px 0 32px;
   font-size: 16px;

docs/assets/csat2.png

@@ -6,17 +6,20 @@ import styles from './Feedback.module.scss';
 
 export interface FeedbackProps {
   /** Submit button label */
-  buttonLabel?: React.ReactNode;
+  buttonSendLabel?: React.ReactNode;
+  /** Skip button label */
+  buttonSkipLabel?: React.ReactNode;
   /** Type of feedback collection */
   responseType?: SharedSurveyProps['responseType'];
   /** Optional predefined feedback choices */
   choiceOptions?: SharedSurveyProps['choiceOptions'];
-  /** Callback when feedback is submitted */
-  onSubmit?: (text: string | string[]) => void;
+  /** Callback when feedback is submitted (omitted when skipped) */
+  onSubmit?: (text?: string | string[]) => void;
 }
 
 export const Feedback: React.FC<FeedbackProps> = ({
-  buttonLabel = 'Submit',
+  buttonSendLabel = 'Submit',
+  buttonSkipLabel = 'Skip',
   responseType,
   choiceOptions,
   onSubmit
@@ -25,19 +28,14 @@ export const Feedback: React.FC<FeedbackProps> = ({
 
   const [text, setText] = useState<string>('');
   const [selected, setSelected] = useState<string[]>([]);
-  const [isInvalid, setIsInvalid] = useState<boolean>(false);
 
   const onTextKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>): void => {
     event.stopPropagation();
   }, []);
 
   const onTextChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>): void => {
     setText(event.currentTarget.value);
-
-    if (isInvalid) {
-      setIsInvalid(false);
-    }
-  }, [isInvalid]);
+  }, []);
 
   const onChoiceChange = useCallback((event: React.ChangeEvent<HTMLInputElement>): void => {
     const { value, checked } = event.currentTarget;
@@ -61,11 +59,6 @@ export const Feedback: React.FC<FeedbackProps> = ({
       return;
     }
 
-    if (responseType === 'text' && !textValue) {
-      setIsInvalid(true);
-      return;
-    }
-
     onSubmit?.(text.trim());
   }, [
     text,
@@ -74,6 +67,10 @@ export const Feedback: React.FC<FeedbackProps> = ({
     onSubmit
   ]);
 
+  const onSkip = useCallback((): void => {
+    onSubmit?.(undefined);
+  }, [onSubmit]);
+
   if (!responseType) {
     return null;
   }
@@ -154,9 +151,7 @@ export const Feedback: React.FC<FeedbackProps> = ({
 
           <textarea
             aria-label="Your feedback"
-            aria-required="true"
-            aria-invalid={isInvalid}
-            className={`${styles.textarea} ${isInvalid ? styles.invalid : ''}`}
+            className={styles.textarea}
             id={textareaId}
             maxLength={1000}
             name="feedback"
@@ -172,7 +167,15 @@ export const Feedback: React.FC<FeedbackProps> = ({
         className={styles.submit}
         type="submit"
       >
-        {buttonLabel}
+        {buttonSendLabel}
+      </button>
+
+      <button
+        className={styles.skip}
+        type="button"
+        onClick={onSkip}
+      >
+        {buttonSkipLabel}
       </button>
     </form>
   );

docs/assets/nps10-mobile.png

@@ -27,7 +27,9 @@ export interface SurveyRootProps {
   /** Follow-up feedback question */
   textQuestion?: SharedSurveyProps['textQuestion'];
   /** Submit button text */
-  textButtonLabel?: SharedSurveyProps['textButtonLabel'];
+  textButtonSendLabel?: SharedSurveyProps['textButtonSendLabel'];
+  /** Skip button text */
+  textButtonSkipLabel?: SharedSurveyProps['textButtonSkipLabel'];
   /** Type of feedback collection */
   responseType?: SharedSurveyProps['responseType']
   /** Optional predefined choices for feedback */
@@ -44,9 +46,9 @@ export interface SurveyRootProps {
   contactButtonSkipLabel?: SharedSurveyProps['contactButtonSkipLabel'];
   /** Current screen */
   screen: SurveyScreen;
-  /** Callback when feedback is submitted */
-  onFeedback?: (text: string | string[]) => void;
-  /** Callback when contact info is submitted (omitted when skipped) */
+  /** Callback when feedback is submitted (omitted when skipped) */
+  onFeedback?: (text?: string | string[]) => void;
+  /** Callback when contact is submitted (omitted when skipped) */
   onContact?: (email?: string) => void;
 }
 
@@ -57,7 +59,8 @@ export const SurveyRoot: React.FC<SurveyRootProps> = ({
   dir,
   question,
   textQuestion,
-  textButtonLabel,
+  textButtonSendLabel,
+  textButtonSkipLabel,
   responseType,
   choiceOptions,
   thankYouMessage,
@@ -114,7 +117,8 @@ export const SurveyRoot: React.FC<SurveyRootProps> = ({
           role="region"
         >
           <Feedback
-            buttonLabel={textButtonLabel}
+            buttonSendLabel={textButtonSendLabel}
+            buttonSkipLabel={textButtonSkipLabel}
             choiceOptions={choiceOptions}
             responseType={responseType}
             onSubmit={onFeedback}

src/components/Feedback/Feedback.module.scss

@@ -88,8 +88,9 @@ const useSurveyState = ({
     finishFlow
   ]);
 
-  const onFeedbackChange = useCallback(async(text: string | string[]) => {
+  const onFeedbackChange = useCallback(async(text?: string | string[]) => {
     if (!text?.length) {
+      finishFlow();
       return;
     }
 

src/components/Feedback/Feedback.tsx

@@ -36,7 +36,8 @@ const commonProps: CES7SurveyProps = {
   minLabel: 'Very difficult',
   maxLabel: 'Very easy',
   textQuestion: 'We’d love to hear your thoughts — what can we improve?',
-  textButtonLabel: 'Submit',
+  textButtonSendLabel: 'Submit',
+  textButtonSkipLabel: 'Skip',
   responseType: null,
   choiceOptions: null,
   thankYouMessage: 'Thank you for your feedback',