StepOptionsButton

Defined in: step.ts:435

A button in the footer of a step.

Properties

action?

optional action?: StepButtonAction | ((this) => void)

Defined in: step.ts:459

What the button does when clicked. Either the name of a tour method, which keeps a tour definition plain JSON and works before the tour exists, or a function.

A function is bound to the tour, so this.next() works inside a function or method. An arrow function does not get that binding, so () => this.next() fails; use () => tour.next() there.

Example

buttons: [
  { text: 'Back', action: 'back', secondary: true },
  { text: 'Next', action: 'next' },
  {
    text: 'Skip to pricing',
    action() {
      return this.show('pricing');
    }
  }
]

---

attrs?

optional attrs?: Record<string, string | number | boolean>

Defined in: step.ts:485

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

{
  text: 'Next',
  action: tour.next,
  attrs: {
    'data-test': 'next-button',
    'data-analytics-id': 'tour-next',
    'title': 'Proceed to the next step'
  }
}

---

classes?

optional classes?: string

Defined in: step.ts:490

Extra classes to apply to the <a>

---

disabled?

optional disabled?: boolean | (() => boolean)

Defined in: step.ts:496

Whether the button should be disabled When the value is true, or the function returns true the button will be disabled

---

label?

optional label?: StringOrStringFunction

Defined in: step.ts:501

The aria-label text of the button

---

secondary?

optional secondary?: boolean

Defined in: step.ts:506

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

---

text?

optional text?: StringOrStringFunction

Defined in: step.ts:511

The HTML text of the button