# Button

<br /><br /><br />
##  **button**

Props|Values|Default
--|--|--
<!-- justifyContent|string|center|
alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center|
alignContent | "flex-start" , "flex-end" , "center" , "space-between" , "space-around" , "stretch" | null
width | string eg: 20px | 100%
height | string eg: 20px | 100%
textAlign | "left" , "right" , "center" , "justify" , "inherit" | center
wrap(fle-wrap) | "nowrap" , "wrap" , "wrap-reverse" | wrap
direction(flex-direction)| row, row-reverse, column, column-reverse | row
margin | string. Eg: 20px | 0
pad(padding) | string | 0
bgColor(background-color) | string | transparent -->

### __Usage__
```js
    import Button from "devs-react-button"
    
    const theme: ThemeTypes = {
        palette: {
            Blue: {
                dark: {
                    5: '#F2F6FA'
                },
            },
        };
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Flex } = Components(theme)

   const App = () => (
        <Flex
            justifyContent="center"
            bgColor='Blue.dark.5'
            // ...other propps if needed
        >
            This is a div
        </Flex>
   )
```