Alert vs Modal for a specific usecase

[AleenaSA]

When a user lands on a page, we wish to show an informative dialog with a single button 'Continue'

Something like the following sans the Cancel button:

But in the alert-dialog component, both the buttons in the footer are marked as required.

The second option is to use a Modal component which has more flexible footer. However the close icon on top-right is something we do no want.

What would be the best way to move forward? Modal component without the close icon is ideal, but if not feasible what are the guidelines regarding using the primary button and the close button for same action, i.e. "continue" action?

[AleenaSA]

Closing this discussion as there is a simple workaround of eliminating < ModalHeader > and adding the heading directly in the body

[AleenaSA]

oh, the design is very close to how the Alert-dialog component (i.e. modal without the close[X] icon on top right) and with a single button in the footer. for e.g.:

Code Sandbox

[nkrantz]

Hey @AleenaSA - I think what @serifluous is asking for here is a little more context on your specific use case for the dialog. Knowing what the content will be and what you're trying to achieve by showing a page overlay will help us give you some guidance on the best component to use.

We built the Modal and the Alert Dialog components very intentionally to either allow for the user to close out of the dialog without necessarily taking a certain action (Modal), or to ensure the user take a certain action or acknowledge a message before closing (Alert Dialog).

[AleenaSA]

Well the specific context is that the user is trying to access another product offering from the main home page. But some products require the user to setup Two-factor authentication.
main page -> clicks on product logo -> 2FA page -> <user completes the 2FA setup> -> redirect to the new product

We are planning to show the above popup on the 2FA page, giving the user some information on why they're seeing this page instead of the product directly. The user clicks on continue and proceeds with 2FA setup

I think the below image will help

[nkrantz]

Thanks for the context! It's a bit of a confusing flow for the user to click on a link that they think will take them to one page (product page), but be taken to a different page instead (2FA page).

One option would be to re-work the flow just a bit. From the main/initial page, when the user clicks on the product link, instead of taking them to an unexpected page and showing the 2FA popup there, the button could trigger a Modal that explains why they would need to go to the 2FA page before the page they're attempting to navigate to, and why. The Modal would also contain a link to the 2FA page so that the user could go there intentionally.

If you'd like to talk about the flow more and brainstorm additional solutions together, feel free to sign up for Office Hours! If so, we'd encourage your designer to come as well so that we can talk about the best way to build this flow.

[serifluous]

^ Agree with what Nora said.

Also, one thing to call out: Even if you remove the close button, users can still press 'Esc' or click outside of the Modal to close it.

[AleenaSA]

That's a good point. We have already discussion around the similar lines but there are some complications with conditionally rendering the popup. But will keep this in mind, thank you!