mx-button

React MxButton Component

Install

npm install --save mx-button

Usage

import*asReactfrom'react'import{MxButton}from'mx-button'constApp=()=>{return(<divstyle={{display: 'flex',margin: '20px',flexDirection: 'column'}}><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center'}}><spanstyle={{width : "100px"}}>Primary</span><MxButtonlabel={'Button'}variant='primary'size='small'/><MxButtonlabel={'Button'}variant='primary'size='medium'/><MxButtonlabel={'Button'}variant='primary'size='large'/></div><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center'}}><spanstyle={{width : "100px"}}>Secundary</span><MxButtonlabel={'Button'}variant='secondary'size='small'/><MxButtonlabel={'Button'}variant='secondary'size='medium'/><MxButtonlabel={'Button'}variant='secondary'size='large'/></div><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center'}}><spanstyle={{width : "100px"}}>Outlined</span><MxButtonlabel={'Mx Button small'}variant='outlined'size='small'/><MxButtonlabel={'Mx Button medium'}variant='outlined'size='medium'/><MxButtonlabel={'Mx Button large'}variant='outlined'size='large'/></div><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center'}}><spanstyle={{width : "100px"}}>Text</span><MxButtonlabel={'Mx Button small'}variant='text'size='small'/><MxButtonlabel={'Mx Button medium'}variant='text'size='medium'/><MxButtonlabel={'Mx Button large'}variant='text'size='large'/></div><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center'}}><spanstyle={{width : "100px"}}>Rounded</span><MxButtonlabel={'Mx Button small'}variant='rounded'size='small'/><MxButtonlabel={'Mx Button medium'}variant='rounded'size='medium'/><MxButtonlabel={'Mx Button large'}variant='rounded'size='large'/></div><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center'}}><spanstyle={{width : "100px"}}>Square</span><MxButtonlabel={'Mx Button small'}variant='square'size='small'/><MxButtonlabel={'Mx Button medium'}variant='square'size='medium'/><MxButtonlabel={'Mx Button large'}variant='square'size='large'/></div></div>)}exportdefaultApp

License

MIT © MaxiCorrea