# Button

Generic button component to execute action on click

```js
import Button from 'deepsight-react-components/Button';

return <Button ... />
```

## Props

| prop                | type       | required | default   | description                                                                                      |
| :------------------ | :--------- | :------: | :-------- | :----------------------------------------------------------------------------------------------- |
| `label`             | `string`   |  `true`  |           | The label to be displayed in the button                                                          |
| `color`             | `string`   | `false`  | `default` | The button style according to the colors detailed below                                          |
| `icon`              | `string`   | `false`  | `null`    | When set, the icon to display on the left of the label                                           |
| `iconOnLeft`        | `boolean`  | `false`  | `true`    | When set to false, the icon is displayed on the right of the label                               |
| `height`            | `number`   | `false`  | `36`      | When set, overwrite the height of the button according to the provided value (in px)             |
| `minWidth`          | `number`   | `false`  | `80`      | When set, overwrite the minimum width of the button according to the provided value (in px)      |
| `maxWidth`          | `number`   | `false`  | `250`     | When set, overwrite the maximum width of the button according to the provided value (in px)      |
| `formatText`        | `boolean`  | `false`  | `true`    | Format the label to uppercase letters (true by default)                                          |
| `fontSize`          | `number`   | `false`  | `12`      | When set, override the default font size (px)                                                    |
| `fontColor`         | `string`   | `false`  | ``        | When set, override the default font color                                                        |
| `noBorder`          | `boolean`  | `false`  | `false`   | When set, remove the border of the selected button style                                         |
| `handleClick`       | `Function` | `false`  |           | The function executed on a click                                                                 |
| `animation`         | `object`   | `false`  |           | Object with key specific to trigger css animation set inside the component                       |
| `iconCustomStyle`   | `object`   | `false`  |           | Object used to add custom css to the icon                                                        |
| `buttonCustomStyle` | `object`   | `false`  |           | Object used to add custom css to the button                                                      |
| `customBackground`  | `string`   | `false`  |           | Allows to override background color on button does not matter which type of button is being used |
| `actions`           | `Action[]` | `false`  |           | The list of possible actions that will be presented as a dropdown list view                      |
| `iconDropdown`           | `string` | `false`  |   ``        | 
| `count`           | `number` | `false`  |    `0`       | Allows you to have a pad in the upper right corner that displays an integer number  

## Colors

- blue
- blue-outline
- blue-outline-no-shadow
- dark-blue
- light-blue
- green
- dark-green
- grey
- orange
- red
- white
- transparent-hover-light-blue
- locked
- default

## Animations

- rotate
- fadeInOut