The tutorial component guides users through new or critical workflows or features.
Some of the pointers to keep in mind:
Provide a title to better guide the user through the feature.
The width of the component is fixed to 350px, do not increase the width.
The size of the image that can be inserted is 310px x 310px. Maintain the size.
Keep the height of the component as short as possible.
Images should have null alt text (alt="") if it is decorative; if image conveys information, provide appropriate alt text to describe purpose
Tooltip: See usage guidelines.
Main text: This can be the title or a paragraph if you don't need one.
Secondary text: Complementary text when using a title. OPTIONAL
Illustrations: Supplementary visual enhancement. OPTIONAL
Footer: Contains step counter and tutorial actions.
Target container: A visual indicator that highlights a component within the tutorial.
Virtual cursor: A visual indicator that highlights an interaction within the tutorial. This can be configured to activate UI elements.
The user can dismiss the tutorial at any time. The popover appears over the existing UI without adding any additional focus.
An underlay covers everything behind the targeted UI elements. The user can dismiss the tutorial. It forces focus.
Same as level 2 it adds an underlay to focus on the tutorial. This level of interruption does not allow the user to dismiss it. It requires completion to be dismissed.
Various compositions are possible with different combinations of components.
The component has two variations:
Dismiss: The component can be dismissed. To turn it on or off, use the toggle on the right side panel.
Caret: The component can have caret. To turn it on or off use the toggle on the right side panel.
Only put one piece of information or action per step. Keep each step concise and to the point.
Limit the number of steps you use. Keep the tutorial lightweight.
Use Got it and Confirm instead of Next for the final step.
Images should have null alt text (alt="") if it is decorative; if image conveys information, provide appropriate alt text to describe purpose
Any illustrations or images used should have null alt text (alt="") if it is decorative; if the image conveys information, provide appropriate alt text to describe the purpose.
To enable image within the tutorial component, change the type to image in the dropdown from the options in the right panel.
