the-button

the-button

Button of the-components

Installation

$ npm install the-button --save

Usage

Live Demo is hosted on GitHub Page

'use strict'

import React from 'react'
import { TheButton, TheButtonGroup, TheButtonStyle } from 'the-button'
import { TheRouter } from 'the-router'

class ExampleComponent extends React.PureComponent {
  handleClick = (e) => {
    console.log('clicked!', e)
  }

  render () {
    const { handleClick } = this
    return (
      <div>
        <TheRouter.Hash>
          <TheButtonStyle/>
          <TheButton onClick={handleClick}>Normal Button</TheButton>
          <TheButton primary onClick={handleClick}>Primary Button</TheButton>
          <TheButton disabled onClick={handleClick}>Disabled Button</TheButton>
          <TheButton spinning onClick={handleClick}>Spinning Button</TheButton>
          <TheButton light onClick={handleClick}>Light Button</TheButton>
          <TheButton simple onClick={handleClick}>Simple Button</TheButton>
          <TheButton danger onClick={handleClick}>Danger Button</TheButton>
          <TheButton wide onClick={handleClick}>Wide Button</TheButton>
          <TheButton large onClick={handleClick}>Large Button</TheButton>
          <TheButton rounded onClick={handleClick}>Rounded Button</TheButton>
          <TheButton rounded icon='fa fa-car' onClick={handleClick}>Rounded icon Button</TheButton>
          <TheButton rounded spinning onClick={handleClick}>Rounded Spinning Button</TheButton>
          <TheButton color='#83E' onClick={handleClick}>Color Button</TheButton>
          <TheButton color='#83E' primary onClick={handleClick}>Color Primary Button</TheButton>
          <TheButton color='#FFA' primary onClick={handleClick}>Color Primary Button2</TheButton>
          <TheButton rounded floated onClick={handleClick}>Round Float Button</TheButton>
          <TheButton to='/whatever'>Nav Button</TheButton>
          <TheButton.Prev to='#'>Go Left</TheButton.Prev>
          <TheButton.Next to='#'>Go Right</TheButton.Next>
          <TheButton icon='fa fa-car' text='Icon button'/>
          <TheButton largeIcon='fa fa-car' text='Large Icon button'/>
          <hr/>


          <TheButtonGroup>
            <TheButton onClick={handleClick}>Grouped Button 01</TheButton>
            <TheButton onClick={handleClick}>Grouped Button 02</TheButton>
          </TheButtonGroup>

          <br/>

          <TheButtonGroup collapsed>
            <TheButton onClick={handleClick}>Grouped Button 03</TheButton>
            <TheButton onClick={handleClick}>Grouped Button 04</TheButton>
            <TheButton onClick={handleClick}>Grouped Button 05</TheButton>
          </TheButtonGroup>

        </TheRouter.Hash>
      </div>

    )
  }
}

export default ExampleComponent

Components

TheButton

Button of the-components

Props

Name	Type	Description	Default
color	string	Color theme	null
danger	bool	Danger style	false
disabled	bool	Disabled state	false
floated	bool	Floated style	false
icon	string	Icon class	null
large	bool	Large style	false
largeIcon	string	Large icon class	null
light	bool	Light color	false
minInterval	number	Minimum interval	300
onSubmit	func	Handle submit	null
primary	bool	Primary style	false
rounded	bool	Rounded style	false
simple	bool	Simple style	false
small	bool	Small style	false
spinning	bool	Show spinner	false
text	string	Button text	null
wide	bool	Wide style	false
role			'button'

TheButtonGroup

Group of buttons

Props

Name	Type	Description	Default
align	enum	Direction to align	'center'
collapsed	bool		false

TheButtonStyle

Style for TheButton

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo