Button

This component, by default, looks like this:

which can be achieved with the following code:

import React from 'react'
import ReactDOM from 'react-dom'
import {RSGButton} from 'rsg-components'

var app = document.querySelector('#app');
ReactDOM.render(
  <RSGButton>BUTTON</RSGButton>, app
)

In version 3.0.0-beta.1 and later RSG is removed from the components so you have to use only Button instead of RSGButton

---

Props:

NOTE: The RSGButton supports all standard props React buttons accept.

Props	Type	Description
standard props	standard	all standard React props for a button: http://goo.gl/SSrsHn
background	string like this: "red"	Set the background like the html style tag: style="background: red"
color	string like this: "blue"	Set the color like the html style tag: style="color: blue"
fontSize	string like this: "10px"	Set the fontSize like the html style tag: style="font-size: 10px"
fontStyle	string like this: "italic"	Set the fontStyle like the style tag: style="font-style: italic"
opacity	string like this: "0.5"	Set the opacity % like the html style tag: style="opacity: 0.5"

The special prop "sizes" sets the size of the button. It accepts one of the following:

prop value	size styles
s	padding: 1px 3px; font-size: 12px
l	padding: 5px 7px; font-size: 18px
xl	padding: 9px 11px; font-size: 20px
xxl	padding: 12px 14px; font-size: 25px
default	padding: 5px 4px; font-size: 16px

Examples:

The "sizes" prop:

import React            from 'react';
import ReactDOM         from 'react-dom';
import { Button }    from 'rsg-components';

class MainComponent extends React.Component {
  render(){
    return(
      <div>
        <Button sizes={`xxl`}>BUTTON</Button>
      </div>
    )
  }
}

var app = document.getElementById('app');
ReactDOM.render(<MainComponent />, app);

RESULT:

The background prop:

import React            from 'react';
import ReactDOM         from 'react-dom';
import { Button }    from 'rsg-components';

export class MainComponent extends React.Component {
  render(){
    return(
      <div>
        <Button background={`red`}>BUTTON</Button>
      </div>
    )
  }
}

var app = document.getElementById('app');
ReactDOM.render(<MainComponent />, app);

RESULT: