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?


  • 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#


  • 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.


  • Not the best grammar.

Option 2#


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


  • 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#


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


  • Provides limited context into the what is happening.


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.

Loading button content

Last updated on by Paulo Andrade