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

yarn add m-btn

User Guide

• Usage
  • Basic
  • Set Background Color
• Properties
• Configuration
  • setting-values
    • Choices
• Exemple
• 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