TourClose component: accessible close button with customizable icon, aria-label, and asChild polymorphic rendering

TourClose

A button to dismiss or skip the tour.

Usage

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

<TourClose />

Props

Prop

Type

Default Appearance

By default, renders an X icon button:

<TourClose />
// Renders: [X]

Custom Content

<TourClose>
  <span>Dismiss</span>
</TourClose>

With Icon

import { X } from 'lucide-react';

<TourClose>
  <X className="w-4 h-4" />
</TourClose>

Action Types

Skip (Default)

Marks the tour as skipped and closes it:

<TourClose action="skip" />

Complete

Marks the tour as completed:

<TourClose action="complete" />

Styling

<TourClose className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100" />

In Card Header

<TourCardHeader className="flex items-center justify-between">
  <h3 className="font-semibold">Welcome!</h3>
  <TourClose className="ml-auto" />
</TourCardHeader>

As Child

Use with custom button components:

import { Button } from '@/components/ui/button';

<TourClose asChild>
  <Button variant="ghost" size="icon">
    <X className="w-4 h-4" />
  </Button>
</TourClose>

Custom Close Logic

For advanced scenarios:

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

function CustomClose() {
  const { skip } = useTour('my-tour');

  const handleClose = () => {
    // Custom logic before closing
    analytics.track('tour_dismissed');
    skip();
  };

  return (
    <button
      onClick={handleClose}
      className="text-gray-400 hover:text-gray-600"
      aria-label="Close tour"
    >
      <X className="w-4 h-4" />
    </button>
  );
}

Accessibility

The component includes proper ARIA attributes:

<TourClose ariaLabel="Dismiss tutorial" />
// Renders with aria-label="Dismiss tutorial"

TourClose

On this page