The Upsell Dialog is a specific type of Dialog reserved for upselling. It has a persistent side panel, and users can navigate multiple steps using Next and Back actions.
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. Body |
Main content area that allows for multiple types of content. |
No |
|
5. Subtitle |
Introduces a sub-section of content. |
Yes |
|
6. Description |
Description to provide information, including optional inline links. |
Yes |
|
7. 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 |
|
8. Side panel |
Container to display an illustration on top of a gradient background. |
No |
|
9. Illustration |
Brand illustration to support main content and catch the user’s attention. |
No |
|
10. Dismiss button |
Closes the dialog. |
No |
|
11. 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. |
|
12. Footer - StepCount |
Used in a multi-step flow to indicate current step out of [x] number of steps. |
Yes |
See Dialog for more guidelines on the Header and Description.
Footer
The footer contains the actions that the user can take. It can be single-step or multi-step, and uses the loud Button variant to distinguish upselling from a standard Dialog.
Side panel
The Upsell Dialog’s side panel is open by default and is not collapsible. It displays an illustration on top of a gradient background to support the main content and catch the user’s attention.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| size Variant | small | medium | large | small |
Behaviour
Closing the dialog
In addition to the dismiss and “Cancel” buttons (or similar), users can close an Upsell 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