dd001_The words in a button do not change in the loading state

web, mobile

Question: Should the wording of the button stay the same or should it change in the loading state?

Scenario:

• A button in its neutral state reads Export products

• In the loading state should the button read

  1. {Loading Icon} Exporting products or,
  2. {Loading Icon} Export products
  3. {Loading Icon}

Option 1

For

• The loading icon and button styling change is enough to represent what is happening without having to change the words.
• Easier to provide consistent button loading states across Hub apps. Designers and developers need only to add the loading icon to the previous content of the button.
• Width of buttons will not change considerably in loading states.

Against

• Not the best grammar.

Option 2

For

• Grammatically correct representation of what we are doing. "Hold on user, Hub is Exporting products".

Against

• Adding "-ing" or other grammar changes to a button isn't something we can code into a component on a global level. Designers and developers will need to think through the best grammatical change and make these changes on a per component variation basis.

Option 3

For

• Short and simple.
• Can be coded into a global component.

Against

• Provides limited context into the what is happening.

Decision

Option 1 - The words in the button do not change in the loading state. Incorrect grammar that results here is a minor cost of reducing friction in consistent usage.