LoadingSpinnerButton for Fender React UI Kit

Description

A button component which has a spinner for a loading state.

Installation and Usage

yarn add @fenderdigital/react-loading-spinner-button --save

import LoadingSpinnerButton from '@fenderdigital/react-loading-spinner-button';

Props

• children - renders any child elements, usually the button text
• color - color of the button
• dataId - data id value, mainly for testing
• disabled - option to disable the button
• fontStyles - styles for button text
• loading - bool for whether or not the button is loading
• onClick - handler for when the button is clicked
• requireClick - If true, require both a click and loading={true} before the button starts spinning.
• spinnerColor - color of the loading spinner
• spinnerWidth - width of the loading spinner for different size buttons
• styles - styles for the button itself
• type - button type.

| propName | propType | defaultValue | isRequired | | ------------ | -------- | ------------ | ---------- | | children | node | - | yes | | color | string | red | no | | dataId | string | '' | no | | disabled | bool | false | no | | fontStyles | string | '' | no | | loading | bool | false | yes | | onClick | func | false | no | | requireClick | boolean | false | no | | spinnerColor | string | white | no | | spinnerWidth | number | 15 | no | | styles | string | '' | no | | type | string | 'button' | no |

Development

Check the Monorepo README for development documentation.