READY FOR REVIEW DESIGN IN PROGRESS IMPLEMENTATION PENDING
The purpose of the product tour component is to point out and describe information on a page that users need to learn about. It includes navigation dots and a carat.
Contributors | |
---|---|
Slack channel | |
Paragon Jira ticket | |
Other Jira tickets | |
Design resources | |
Technical docs |
Design
https://www.figma.com/file/2o1hW9WW1mNWr0esZ2A7xq/Onboarding?node-id=156%3A64๐ณ Variants
Sequence: A version with navigation dots that are bundled and contain at least 2 tips (pictured above)
Navigation dots to indicate progress through sequence
Dismiss (tertiary button) and Next (Primary)
Last tip in a sequence will change Primary button to โDoneโ
One-off: A version that is standalone
No navigation dots (N/A)
No dismiss, just an โOkayโ button (Primary)
๐ Best Practices
Do |
|
Don't |
|
โ Related Components
๐ Specification
What does an engineer need to know in order to build this component?
Redlined Design Spec
โ Behaviors
Click outside the tip when itโs being shown | Will not close; works like our current tooltip where you need to interact to close it |
---|
๐ Accessibility
Notes
Notes from collaborator conversations or meetings regarding this component.