StepOptionsCancelIcon

Defined in: step.ts:524

The close “×” in the header of a step. It is off unless enabled is true.

Properties

attrs?

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

Defined in: step.ts:548

Additional HTML attributes to apply to the cancel icon 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, or aria-label. Use the dedicated label property to control the aria-label.

Example

cancelIcon: {
  enabled: true,
  label: 'Close Tour',
  attrs: {
    'data-test': 'close-tour-button',
    'data-analytics-id': 'tour-close'
  }
}

---

enabled?

optional enabled?: boolean

Defined in: step.ts:552

Should a cancel “✕” be shown in the header of the step?

---

label?

optional label?: string

Defined in: step.ts:556

The label to add for aria-label