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.

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'

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?