@npm.tangocode/tc_ui_components/src/documentation/LoadingButton.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## Loading Button ##

### Description ###

A loading button animation.

### Props ###

1. __onClick__(function): This allows a callback to be set for a desired action on the click of the button.

2. __name__(string): This will set the name attribute for the button

3. __content__(string): This will be the text that is displayed on the button 

4. __disableMouseOverStyles ?__(boolean): This will remove the hover styles that the button is initially given by being set to true

5. __styles ?__(LoadingButton.Styles): Allows for custom styles to be set on the loading button. There are different modes that the button can be set to and those modes can all have their styling changed through this prop

    ```ts
        styles={{
            Container?: <styled component>;
            LoadingImg?: <styled component>;
            Button?: <styled component>;          
            Loading?: <styled component>;
            Failed?: <styled component>;
            Success?: <styled component>;
            Disabled?: <styled component>;
        }};


    ```

6. __mode ?__(string):  This is where the button's modes are set. The button can be set to loading, failed, success, and disabled mode. This is done by passing in the name of the mode wanted.

     
7. __id ?__ (string): A prefix id for all the html elements of the component


### Usage ###

``` jsx
    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.LOADING} />
```
This is the button in Loading mode 

![loading_button_loading](https://s3.amazonaws.com/tc-ui-components/documentationImages/loadingbutton.gif)


``` jsx
    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.DISABLED} />
```
This is the button in Disabled mode 

![loading_button_disabled](https://s3.amazonaws.com/tc-ui-components/documentationImages/Disabled.png)


``` jsx
    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.SUCCESS} />
```
This is the button in Success mode 

![loading_button_success](https://s3.amazonaws.com/tc-ui-components/documentationImages/Success.png)


``` jsx
    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.FAILED} />
```
This is the button in Failed mode 

![loading_button_failed](https://s3.amazonaws.com/tc-ui-components/documentationImages/Failed.png)

### Styling ###

```jsx
const newStyles = {
    Container: styles.loadingbutton.Container.extend`
        width: 70px;
        height: 38px; `
    }

 render() {
        return (
    <div style={{ width: "100vw", height: "300px" }}>
       <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.LOADING} styles={newStyles}/>
    </div>
        )
 }
```