Loader Button

Components

Loader Button

Code

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

Name	Type	Default	Description	Required?
`isLoading`	`boolean`	`false`
`loaderLabel`	`string`

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>