Configuration

Step configuration

Every step carries a configuration block that controls how it is rendered.

Core fields

Field	Type	Description
type	"banner" | "pointer" | "dialog" | "announcement"	Step presentation style.
progressButtonText	string	Label for the primary “advance” button.
progressButtonPosition	"left" | "center" | "right"	Where to render the progress button within the footer.
contentJustify	see below	Horizontal distribution of footer content.
showStepCount	boolean	Show the step index in the footer.
customPivotSelector	string	CSS selector for the anchor element. Required for pointer.
isClosable	boolean	Show the close button in the step header.
position	DialogPosition	Position for dialogs and announcements.
animationDirection	"auto" | "top" | "right" | "bottom" | "left"	Direction for step transitions.

contentJustify accepts "left", "right", "justify-between", "justify-around", "justify-evenly", or null.

Button configuration

Each of primaryButton, previousButton, and closeButton takes:

{
  show?: boolean;
  text: string;
  action: "next" | "prev" | "complete" | "custom" | "nothing";
  linkUrl?: string;
  linkTarget?: string;
  icon?: string;
}

Beacon

Optional beacon that draws attention to the anchor before the step opens:

beacon: {
  show: true,
  type: "hotspot", // or "badge" | "label"
  position: "top-right",
  label: "New",
}

Tour configuration

The tour.configuration block is optional:

Field	Type	Description
type	"tour" | "slideout" | "banner" | "announcement"	Tour format.
showStepCount	boolean	Show step count across the tour.
progressType	"text" | "bar"	Render progress as text (“3 of 8”) or a bar.
animation	{ enabled, direction, speed }	Tour-wide animation settings.
theme	Same shape as step theme	Tour-wide theme overrides.

Examples

Pointer anchored to a button

{
  id: "step-save",
  title: "Save your work",
  description: "Click here to save your work at any time.",
  configuration: {
    type: "pointer",
    progressButtonText: "Got it",
    progressButtonPosition: "right",
    contentJustify: "justify-between",
    showStepCount: false,
    customPivotSelector: "#save-button",
    isClosable: true,
  },
}

Non-closable dialog

{
  id: "step-accept-terms",
  title: "Accept the terms",
  description: "You must accept the terms before continuing.",
  configuration: {
    type: "dialog",
    progressButtonText: "I accept",
    progressButtonPosition: "right",
    contentJustify: "justify-between",
    showStepCount: false,
    customPivotSelector: "",
    isClosable: false,
  },
}