Destructive action modal

[ceyerkes]

Hello! I'm looking for guidance around destructive modal actions.

I'm working on an override existing content flow. Basically, if there's existing HTML in the editor, a user has the option of importing an HTML file, but we want to be super clear that if they already have HTML content in the editor, they will be overriding that content if they import.

This was my first take - not sure if this is the right way to use the alert banner, but felt like we need something that will stand out:

Also exploring another option with destructive primary button, plus the option to copy the HTML you're potentially overriding as well (need to confirm with eng):

Also also wondering if requiring a "type override [file name]" (i don't know what this type of action is called) is appropriate/recommended by Paste, but it's another option that came up in feedback. SG uses one if you want to delete all of your contacts.

As always, let me know if you'd prefer I attend office hours to discuss, thank you!

[serifluous]

Hey @ceyerkes ! For context, by this line:

Also also wondering if requiring a "type override [file name]" (i don't know what this type of action is called) is appropriate/recommended by Paste, but it's another option that came up in feedback. SG uses one if you want to delete all of your contacts.

do you mean something like this? https://paste.twilio.design/patterns/delete#high-severity

[ceyerkes]

exactly!

[serifluous]

Great! I know the pattern doesn't exactly cover your use case, but as you're exploring more options, you could consider a 2-step modal flow (upload --> confirm override). Also, looking back on that pattern, I think it makes more sense to move the content in the help text in the example to a paragraph above the form field, so it's more like:

Let us know if you have more questions & what you end up deciding!

[ceyerkes]

Sweet, thanks @serifluous! I think using this 2-step modal for both the override and delete modals makes sense.

[ceyerkes]

We'd actually have to ask them to input something other than a file name, since it's just HTML that they would be overriding, and not necessarily anything that's a saved block. So maybe "to confirm this deletion, please input "delete" in the input below" ?

[serifluous]

Yep, that totally seems reasonable.