Modals

Skippable

Additionally, if you are using Standard or Sidebar Modal, when a user clicks outside of the content block the Modal will be skipped, even if using a 100% opacity backdrop.

You can set the color and add or remove a backdrop for your Modals in the Theme you're using. This is done on the Pattern tab, under the Modals & Slideouts configuration. If you set the opacity to 0%, there will be no backdrop, if set to 100% the backdrop will fully cover your app behind it. 

Not Skippable

Additionally, you can fully block your application from being visible with the full screen Modal type or by using a 100% opacity backdrop with Standard or Sidebar Modal. You can adjust your backdrop in your Theme, as mentioned above.

Full Screen Modals

You can also use a Full Screen Modal. It automatically adds a backdrop which blocks your application behind it and the user will only be able to click a button or the ‘x’ skip option if the Modal is skippable. Full Screen Modals don't allow the user to click anywhere outside the container to dismiss it.

Slideouts

Skippable

If a Slideout is set to 'Skippable' with no backdrop, the user will be able to dismiss the Slideout by clicking clicking the ‘X’ close option, and the user will be able to interact with the rest of the application without dismissing the Slideout - it will stay on the page until they interact with it, or the user navigates away from the page.

If a Slideout is set to 'Skippable' and has a backdrop, the rest of the application will be dimmed behind the backdrop, but clicking either on the 'X' close option or on the dimmed backdrop will dismiss the Flow.

Not skippable

If a Slideout is set to 'Not skippable' with no backdrop, the user will be able to interact with the rest of the application without dismissing the Slideout - it will stay on the page until they interact with it, or the user navigates away from the page.

If a Slideout is set to 'Not skippable' and has a backdrop, the user will not be able to interact with the rest of the application, and will need to interact with the Slideout in order to continue.

Tooltips

Skippable

If a Tooltip is set to be 'Skippable' with either the 'x' close option or the 'dismiss link', and no backdrop, the user will be able to interact with the page but the Tooltip will not be dismissed unless the user actively clicks on the 'x' or 'dismiss link'.

If a Tooltip is set to be 'skippable' with either the 'x' close option or the 'dismiss link', and does have a hard backdrop, the user will not be able to interact with the page and will have to either interact with the Tooltip/the target element or dismiss/close it in order to continue working on the page.

Not skippable

If a Tooltip is set to be ‘Not Skippable’ and no backdrop, the user will be able to interact with the page but the user will need to click the button to continue the flow or navigate away if they wish to end the flow.

If a Tooltip is set to be ‘Not Skippable’ and does have a hard backdrop, the user will not be able to interact with the page and will have to either interact with the Tooltip/the target element in order to continue working on the page.

Hotspots

Hotspots can be skippable or not skippable, but no backdrop can be applied to them. Due to their nature of passive discovery, Hotspots allow the user to expand them if they want to, to close them with the dismiss link but also to interact with the rest of the page if the user wants to.