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.38.0 (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?