[Bug]: loadingText does not display when button is in a loading state

[Tro95]

Browser

Firefox

Package version

3.0.624

React version

18.3.1

Description

The loadingText property of the Button component does not appear to be working as advertised in https://cloudscape.design/components/button?tabId=api. When I have a Button with the loading property set to true, I expect the loadingText string to be the text rendered inside the button, but instead the button continues to show the text rendered from the child component.

Source code

No response

Reproduction

import React from 'react';
import "@cloudscape-design/global-styles/index.css"

import { AppLayout, Button} from '@cloudscape-design/components';

export default function App() {
    return (
        <AppLayout
            content={
                <Button
                    loading={true}
                    loadingText="Is loading"
                >
                    Not loading
                </Button>
            }
            toolsHide={true}
        />
    );
}

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[drewdh]

This prop is only for screen readers.

Specifies the text that screen reader announces when the button is in a loading state.

---

Edit: Though I doubt changing the button text is recommended by the CS team, you can always change the content of the button yourself when the loading prop is true.

<Button loading={isLoading}>
  {isLoading ? 'Loading' : 'Submit'}
</Button>

[Tro95]

Thank you, I guess that makes sense.

Is there a reason why the behaviour is limited only to screen readers, as opposed to changing the button text similar to how loadingText works on other components (such as Table or BarChart)? It seems counter-intuitive for the same-named property to work in different ways for different components.

[pan-kot]

Hello,

Thanks for your question. The loading text is not displayed for buttons because it is assumed that when used on an action button with a label the spinner provides enough information on its own (for sighted customers). For example, if a button "Submit" transitions to a loading state you can change its label to "Submitting" but it is not necessary because the spinner would convey the transition as well. If, however, the loading text does convey additional information you can also update the label or render it alongside the button.

[gethinwebster]

Closing issue, please let us know if there are any further questions.