Components

Loader Button

Loader buttons are used to display a loading indicator inside of a button.

In some cases, a button's action kicks off some event which requires a loading state. This component composed together the Button component and the Loader component in a way that is accessible and easy to use.

The LoaderButton component accepts all of the props of the Button component, in addition to a few more to control the loading experience. Notably, the loaderLabel prop must be provided to ensure that the loading state is labelled as such for screen reader users.

import { LoaderButton } from '@sproutsocial/racine'
() => {
const [loading, setLoading] = useState(false)
return (
<Box display='flex'>
<LoaderButton
appearance='primary'
isLoading={loading}
onClick={() => {
setLoading(!loading)
window.setTimeout(() => setLoading(loading), 3000)
}}
loaderLabel='Loading...'
margin='auto'
>
Click me to load!
</LoaderButton>
</Box>
)
}

Properties

NameTypeDefaultDescriptionRequired?
isLoadingbooleanfalse
loaderLabelstring

Note: This component uses the Button component under the hood, and accepts all of the props of that component in addition to those listed above.

Button appearances

<Box display='flex' justifyContent='space-around'>
<LoaderButton
isLoading
loaderLabel='Loading...'
>
Loading Button
</LoaderButton>
<LoaderButton
appearance='primary'
isLoading
loaderLabel='Loading...'
>
Loading Button
</LoaderButton>
<LoaderButton
appearance='secondary'
isLoading
loaderLabel='Loading...'
>
Loading Button
</LoaderButton>
</Box>