Easy to use and hightly customisable button made with styled-components 💅

yarn add m-btn

User Guide

• Usage
  • Basic
  • Set Background Color
• Properties
• Configuration
  • setting-values
    • Choices
• Example
• Easy Start

Usage

Basic

import React from 'react'
import Mbtn from 'm-btn'

export const (props) => (
	<div>
  		<Mbtn success light content='Save'/>
  		<Mbtn danger light content='Cancel'/>
  	</div>
)

Set Background Color

In order for the shadows to match the background set the color of the background with the method setBackgroundColor() and pass the context.

Set the color of the background with setBackgroundColor().

setBackgroundColor() accept two arguments:

• color
• nuance

setBackgroundColor(color, nuance)

and return and object :

bg = {
  color: nuancedColor,
  shadow: {
    light: shadowColorLight,
    dark: shadowColorDark
  }
}

Pass the context

Pass the bg object as the context

const bg = setBackground('grey', 'lighter')

const backgroundColor = bg.color

Content.childContextTypes = {
  bg: PropTypes.object
}

For more information on context see the React docs

Properties

Name	Type	Default	Description
content	PropTypes.string		Button content
icon	PropTypes.bool		Change button content to icon content
iconClass	PropTypes.string	'material-icons'	Icon class (ex: 'fa fa-hand-peace-o')
primary	PropTypes.bool		color
info	PropTypes.bool		color
warning	PropTypes.bool		color
success	PropTypes.bool		color
danger	PropTypes.bool		color
grey	PropTypes.bool	true	color
lighter	PropTypes.bool		nuance
light	PropTypes.bool		nuance
main	PropTypes.bool	true	nuance
dark	PropTypes.bool		nuance
darker	PropTypes.bool		nuance
accent	PropTypes.string		only light, main and dark nuances
bold	PropTypes.bool		bold font
textColor	PropTypes.string	backgroundColor	text color (choose between colors or css colors)
textNuance	PropTypes.string	backgroundColorNuance	text color nuance ( if textColor, choose between nuances)

Configuration

Change default configurations in m-btn/config directory:

• Color Palette

• Style config

• Background config

Accessing default values

You can import the settings and use those value when you need

import { palette } from 'm-btn'

const color = palette.primary.light

Setting values

Name	Type	Exemple	Choices
palette	PropTypes.object	const color = palette.primary.main	Colors
fontSize	PropTypes.object	const myFontSize = fontSize.heading2	Font Sizes (px)
fontSizeValue	PropTypes.object	const myFontSize =`${fontSizeValue.bodyBig}px`	Font Sizes (num)
spacing	PropTypes.object	const mySpace = spacing.small	Sizes
diametre	PropTypes.object	const mySpace = spacing.small	Sizes (no huge or tiny)
baseRadius	PropTypes.string	const myRadius = baseRadius
setBackground	PropTypes.func	const bg = setBackground('primary', 'light')

Choices

Colors	Nuances	Font Sizes	Sizes
primary	main	heading1	base
info	light	heading2	small
warning	lighter	heading3	big
success	dark	heading4	tiny
danger	darker	bodyHuge	huge
grey		bodyBig
		body
		bodySmall
		bodyTiny
		rem.Sizes

Exemple

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import Mbtn, { setBackground, fontSize, palette } from 'm-btn'

const bg = setBackground('grey', 'lighter')

const Wrapper = styled.div`
  background-color: ${bg.color};
  font-size: ${fontSize.bodyBig};
  color: ${palette.info.light};
`

export default class Content extends Component {

  getChildContext () {
    return { bg: bg }
  }

  render () {
    return (
      <Wrapper>
      	<p>I love Styled Components</p>
        <Mbtn
          primary
          bold
          content='hello' />
        <Mbtn
          icon
          info
          accent
          textColor='info'
          textNuance='dark'
          content='query_builder'
        />
        <Mbtn
          icon
          color='#4dd0e1'
          textColor='PaleVioletRed'
          content='lock_open'
        />
        <Mbtn
        icon
        warning
        dark
        iconClass='fa fa-facebook' />
      </Wrapper>
    )
  }

}

Content.childContextTypes = {
  bg: PropTypes.object
}

Easy Start

1. Create React App
2. Add Mbtn to package.json
3. Add icons cdn
4. Replace App.js
5. Start your App

Create React App

If you d'ont have create-react-app installed globaly go ahead an install it :

npm install -g create-react-app

Quick Overview

cd my-projects
create-react-app my-app
cd my-app/
npm start

For more info see the docs

Add Mbtn to package.json

npm i m-btn --save

or

yarn add m-btn

Add icons cdn

Add Material Icons cdn in public/index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

if you want to use FontAwesome or an other icon provider you have to add their cdn too.

Replace App.js

Remove what's in App.js, copy and paste the code below in App.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import Mbtn, { setBackground, fontSize, palette } from 'm-btn'

const bg = setBackground('grey', 'lighter')

const Wrapper = styled.div`
  background-color: ${bg.color};
  color: ${palette.info.light};
  font-size: ${fontSize.bodyBig};
  text-align: center;
  min-height: 100vh;
  display: flex;
  padding: 4rem;
  flex-direction: column;
  align-items: center;
`

export default class Content extends Component {

  getChildContext () {
    return { bg: bg }
  }

  render () {
    return (
      <Wrapper>
      	<p>I love &lt;Mbtn /&gt; and Styled Components</p>
        <Mbtn
          primary
          bold
          content='Hello' />
        <Mbtn
          icon
          info
          accent
          textColor='info'
          textNuance='dark'
          content='favorite'
        />
      </Wrapper>
    )
  }

}

Content.childContextTypes = {
  bg: PropTypes.object
}

Start your App

If it's not already running start your app:

npm Start