TourNavigation

TourNavigation component: previous/next buttons with automatic disable states and customizable button labels

Provides previous, next, and complete buttons for navigating the tour.

Usage

import { TourNavigation } from '@tour-kit/react';

<TourNavigation />

Props

Prop

Type

Custom Labels

<TourNavigation
  prevLabel="Back"
  nextLabel="Continue"
  completeLabel="Finish Tour"
  skipLabel="Maybe Later"
  showSkip={true}
/>

With Icons

import { ChevronLeft, ChevronRight, Check } from 'lucide-react';

<TourNavigation
  prevLabel={<><ChevronLeft className="w-4 h-4" /> Back</>}
  nextLabel={<>Next <ChevronRight className="w-4 h-4" /></>}
  completeLabel={<><Check className="w-4 h-4" /> Done</>}
/>

Custom Styling

<TourNavigation
  className="gap-4"
  prevLabel={
    <span className="px-4 py-2 border rounded-md hover:bg-gray-100">
      Previous
    </span>
  }
  nextLabel={
    <span className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
      Next
    </span>
  }
/>

Conditional Visibility

// Always show previous (even on first step)
<TourNavigation hideOnFirst={false} />

// Hide next on last step (only show complete)
<TourNavigation hideOnLast={true} />

Skip Option

<TourNavigation showSkip={true} skipLabel="Skip Tour" />

In Card Footer

<TourCardFooter className="flex justify-between items-center">
  <TourProgress />
  <TourNavigation />
</TourCardFooter>

For full control, build your own:

import { useTour } from '@tour-kit/react';

function CustomNavigation() {
  const { next, prev, skip, complete, isFirstStep, isLastStep } = useTour('my-tour');

  return (
    <div className="flex gap-2">
      {!isFirstStep && (
        <button onClick={prev} className="btn-secondary">
          Back
        </button>
      )}
      <button onClick={skip} className="btn-ghost">
        Skip
      </button>
      {isLastStep ? (
        <button onClick={complete} className="btn-primary">
          Finish
        </button>
      ) : (
        <button onClick={next} className="btn-primary">
          Continue
        </button>
      )}
    </div>
  );
}

<TourCard> — the compound card that usually wraps this slot.
<TourProgress> — sibling footer slot that pairs naturally with navigation.
<TourClose> — skip/complete control commonly rendered alongside.
useTour — the hook a fully custom navigation component would call.
Imperative control guide — patterns for driving navigation outside this component.