Interface StepOptionsButton

shepherd.js/src/step.ts:249–314

}

export interface StepOptionsButton {
  /**
   * A function executed when the button is clicked on
   * It is automatically bound to the `tour` the step is associated with, so things like `this.next` will
   * work inside the action.
   * You can use action to skip steps or navigate to specific steps, with something like:
   * ```js
   * action() {
   *   return this.show('some_step_name');
   * }
   * ```
   */
  action?: (this: Tour) => void;

  /**
   * Additional HTML attributes to apply to the button element.
   *
   * This is useful for adding data attributes for testing or analytics,
   * or other custom attributes that don't have dedicated properties.
   *
   * Note: These attributes are applied before Shepherd's core attributes,
   * so they cannot override critical properties like `type`, `onclick`,
   * `class`, `disabled`, `aria-label`, or `tabindex`. Use the dedicated
   * properties (`classes`, `disabled`, `label`, `action`) to control those.
   *
   * @example
   * ```js
   * {
   *   text: 'Next',
   *   action: tour.next,
   *   attrs: {
   *     'data-test': 'next-button',
   *     'data-analytics-id': 'tour-next',
   *     'title': 'Proceed to the next step'
   *   }
   * }
   * ```
   */
  attrs?: Record<string, string | number | boolean>;

  /**
   * Extra classes to apply to the `<a>`
   */
  classes?: string;

  /**
   * Whether the button should be disabled
   * When the value is `true`, or the function returns `true` the button will be disabled
   */
  disabled?: boolean | (() => boolean);

  /**
   * The aria-label text of the button
   */
  label?: StringOrStringFunction;

  /**
   * A boolean, that when true, adds a `shepherd-button-secondary` class to the button.