The Onboarding Dialog is a type of Dialog. It guides users through a task step by step.
A user may be able to navigate multiple steps using the actions Next and Back. A collapsible side panel shares additional information.
Examples:
- Configure Audit Stream
- Add New Kubernetes Agent
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Container |
Dialog container that sits on top of page content. |
No |
|
2. Title |
Mandatory title (no more than a few words) that describes the dialog’s purpose. |
No |
|
3. Divider |
Separates the header from the main content. |
No |
|
4. Leading icon |
Precedes a subtitle to call out a warning or danger message. |
Yes |
|
5. Subtitle |
Introduces a sub-section of content. |
Yes |
|
6. Description - first paragraph |
Description to provide information, including optional inline links. |
Yes, if the dialog already includes other content. |
|
7. Description - second paragraph |
Additional paragraph for the description. |
Yes |
|
8. Content placeholder |
A placeholder for content such as text, form elements, cards, images, etc. |
Yes, if the dialog already includes a description. |
|
9. Footer - StepCount |
Used in a multi-step flow to indicate current step out of [x] number of steps. |
Yes |
|
10. Footer - Actions |
Actions that the user can take, such as to cancel or save, or go to the “next” step in a multi-step flow. |
No |
|
11. Side panel |
Container to display additional information. |
No |
|
12. Illustration |
Mandatory visual to support the text content in the side panel. |
No |
|
13. Collapse button |
Closes the side panel (the panel is open by default). |
No |
|
14. Subtitle |
Introduces the side panel content. |
Yes |
|
15. Description - first paragraph |
Description to provide additional information, including optional inline links. |
No |
|
16. Description - second paragraph |
Additional paragraph for the description. |
Yes |
|
17. Expand button |
Opens the side panel. Only appears if the user first chooses to close the side panel. |
No |
|
18. Footer - Back button |
Action that the user can take to go “back” in a multi-step flow. |
No, if step 2 or more in a multi-step flow. |
See Dialog for more guidelines on the Header, Description, and Content placeholder.
Footer
The footer contains the actions that the user can take.
All button copy is pre-defined. If you require an option that doesn’t exist, please follow our Contribution guidelines.
The Footer variants shown below are for a multi-step onboarding dialog. If your onboarding dialog is not multi-step, you can use a standard Footer variant.
- First step
- Second step (or higher)
- Final step (Primary Button’s label may change based on the task)
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Primary
Expanded side panel
This is the default variant for the Onboarding Dialog. The side panel is open by default to make it clearer that additional information is available.
Collapsed side panel
The side panel will close if the user chooses to press the collapse button.
Upsell
The Upsell Dialog’s side panel is not collapsible. This functionality is replaced with the dismiss button.
Graphic
The side panel can display an illustration on top of a gradient background to catch the user’s attention, and to support the message in the main area.
Testimonial
The side panel can display a testimonial and other content to encourage the user to submit their request for a trial or upgrade.
Behaviour
Closing the dialog
In addition to the dismiss and “Cancel” buttons (or similar), users can close an Onboarding Dialog by tapping the esc key or by clicking anywhere outside the Dialog.
Component dependencies
This component is internally dependent on the following components:
Icons
Our icon library with guidelines on using and adding icons
Button
Buttons allow users to take actions that will trigger a response.
Related components
Recommended reading
Other documentation that will help guide your thinking when working with this component.
Help and support