Tour Dialog

A tour dialog is used convey benefits or instructions for a new features.

Tour dialogs are used to explain a highlighted feature or give instructions to people in a guided tour. It's used in combination with the Tour mananger.

  • Beta

  • Buy Pro

  • 0.42.2 (latest)

Import#

  • TourDialog: The wrapper that provides context for its children.
  • TourDialogTrigger: Wrap around the trigger element in stand alone mode.
  • TourDialagTarget: Positions the dialog in a guided tour.
  • TourDialogCloseButton: The close button, ends the tour when clicked.
  • TourDialogHeader: The dialog header with a title.
  • TourDialogBody: The body containing the message.
  • TourDialogFooter: The footer.
  • TourDialogActions: The tour actions.
  • TourDialogSecondaryAction: The secondary action, dismiss by default.
  • TourDialogPrimaryAction: The primary action, Ok, Start, Next or Complete.
import {
  TourDialog,
  TourDialogTrigger,
  TourDialogCloseButton,
  TourDialogHeader,
  TourDialogBody,
  TourDialogFooter,
  TourDialogActions,
  TourDialogSecondaryAction,
  TourDialogPrimaryAction,
} from '@saas-ui-pro/react'

Usage#

function BasicUsage() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <TourDialog isOpen={isOpen} onClose={onClose} {...args}>
      <TourDialogTrigger>
        <Button label="Toggle tour dialog" onClick={onToggle} />
      </TourDialogTrigger>
      <TourDialogCloseButton />
      <TourDialogHeader>Check out this new feature</TourDialogHeader>
      <TourDialogBody>Start the tour to see how it works.</TourDialogBody>
      <TourDialogFooter>
        <Text>Step 1 of 2</Text>
        <TourDialogActions>
          <TourDialogSecondaryAction />
          <TourDialogPrimaryAction />
        </TourDialogActions>
      </TourDialogFooter>
    </TourDialog>
  )
}

Was this helpful?