import React from 'react'
import { PulseLoader } from 'react-spinners'
import { Button } from 'grommet'
type LoadableButtonProps = {
/** Function to call when the button is clicked (while not disabled) */
onClick: any
/** Whether to display the loading animation or text (true/false respectively) */
loading: boolean
/** Text to display on button when not loading */
label: string
/** Whether to disable this button from further clicks */
disabled?: boolean
}
/**
* A button with a text label that can be changed to a loading state to indicate that an action is awaiting a response.
* Can also be disabled to prevent further interaction. Good for something that'll trigger a process that may not
* respond instantly.
*
* LoadableButton example:
* ```tsx
* <LoadableButton onClick={this.onClickReconcile} loading={this.state.reconciling} label="Reconcile" disabled={this.state.reconciling} />
* ```
* @component
* @category Extras
*/
export const LoadableButton = (props: LoadableButtonProps) => {
let label = props.loading ? <PulseLoader /> : props.label
return <Button label={label} disabled={props.disabled} onClick={props.onClick} />
}
Source