Modal window footer action buttons - Buttons vs. anchor

[ishah-twilio]

What are the guidelines for modal window footer action buttons if the design calls for a button to redirect to billing console and closes the dialog and makes the url change?

According to paste guidelines:"a button communicates that users can trigger an action. If pressing the trigger results in a URL change, or that resultant page makes sense as a whole new browser tab use an Anchor element. Everything else is a Button."

Should we apply this guidelines to Modal window footer action buttons as well if action button redirects and triggers results in a URL change? Should we change footer action buttons to anchor links?

For more reference:
Product: IoT > Super SIM > Order SIM > Select a Payment method > opens a modal dialog which provides information and redirect user to the Billing pages inside console.

[nkrantz]

Hi @ishah-twilio, thanks for starting a Discussion on this! It would be helpful to have a bit more context, like what triggered the opening of the modal. Without knowing that information, though, I would say that you're on the right track with making sure that it's an Anchor (because of the URL change). Check out this section on Buttons with Link Functionality. If it's necessary for the user to perform the task on Billing before continuing with the current flow, you might consider either:

• Using the button-styled anchor in the Modal Footer without a "Cancel" button, or
• Using a regular Anchor in the Modal Body for "Go to Billing", and omitting the Modal Footer altogether.

Also, if the Anchor is navigating to an external link, remember to include the external link icon to let the user know that they'll be navigated away from the current page.

[ishah-twilio]

[TheSisb]

Hi @ishah-twilio,

Option 2 looks better to me! That said, if it's possible to not open a modal and provide this link guidance where the modal trigger lives, that may be best.