Skip to content

StepOptionsButton

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:249

optional action: (this) => void

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:261

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:

action() {
return this.show('some_step_name');
}

Tour

void


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

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:287

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.

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

optional classes: string

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:292

Extra classes to apply to the <a>


optional disabled: boolean | () => boolean

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:298

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


optional label: StringOrStringFunction

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:303

The aria-label text of the button


optional secondary: boolean

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:308

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


optional text: StringOrStringFunction

Defined in: docs-src/node_modules/shepherd.js/src/step.ts:313

The HTML text of the button