Button Loading State RFC

[jhanvi1399]

Hi Everyone!

Paste is redesigning the loading state of the Button component so that it looks disabled when loading is in progress. Apart from making the button look disabled, we are also exploring whether including a label alongside the spinner would enhance accessibility.

One potential drawback of this approach is that the button's size increases when it enters the loading state. We would like your feedback on how this change might affect your products.

Here is a the prototype of the redesigned loading button in action - View Prototype and Explorations Here

Open Questions

1. If the size of the button increases during its loading state, how does that impact your products?
2. How do we feel about having label in the loading state as 'optional'?
3. How does the redesigned button look overall?

Any other feedback is welcome! Thank you

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Switch component: Recommended loading state? (updated: 04/25/2024, similarity score: 89%)
• Adopt Paste component in MC product (updated: 05/30/2023, similarity score: 86%)
• Can help text component be used with a link style button? - Answer (updated: 10/28/2024, similarity score: 85%)

[apombo-ux]

Hello! Folks in the Flex-Admin UX team discussed this proposal today at our crit. Our overall recommendation is to move forward with the styling changes so that the button loading states background colors match the button disabled states, but to keep the current design that replaces the button label with the loading spinner without changing the width rather than including the label along with the spinner.

We have the following feedback related to your open questions:

1. The increase in button width between for the loading state that includes the label is likely to disrupt some layouts, and introduces a feeling of instability to the button group when it pushes content over.
2. Having the label be optionally included with the loading spinner seems like it will invite inconsistencies across Twilio products without clear guidelines for why a label would or wouldn't be included.
3. Given the stated need for making the button state more clearly disabled in the loading state, changing the styling to better reflect the disabled state makes sense, although some of the options in the Figma exploration file look like the more closely align to existing disabled button styles than others. We'd recommend matching existing disabled button styling for the disabled-loading button state.

Additional feedback that came up in our conversation:

• The current design has been working fine for us as-is
• Is it possible to meet the accessibility concerns of having a label-less loading state through other means (ex. a title or aria-label in the code?)
• Right now, the pattern for the loading state is clear and simple-- the spinner replaces all content. With this new proposal, it's unclear how icon-only buttons or buttons with prefix/suffix icons would be affected, but this should also be considered.

Thanks for sharing the work in progress!

[jhanvi1399]

Hi @apombo-ux! Thank you for sharing your feedback, this definitely helped us to make a better decision. As of now, we are planning to move forward with just visual changes that replaces the label with a loading spinner. Once again, thank you for the insights!

Best,
Jhanvi