react-buttons  


React Buttons component.

Demo: https://trendmicro-frontend.github.io/react-buttons

Installation

1. Install the latest version of react and react-buttons:

``
npm install --save react @trendmicro/react-buttons
`

2. At this point you can import @trendmicro/react-buttons and its styles in your application as follows:

`js
import { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-buttons/dist/react-buttons.css';
`

Recommended Setup

Create a Buttons component inside your common components directory:
`
components/
Buttons/
index.js
`

components/Buttons/index.js
`js
import '@trendmicro/react-buttons/dist/react-buttons.css';

export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';
`

Then, import Button component in your code:
`js
import { Button } from './components/Buttons';
`

Usage

$3

`js
Default
Primary
Emphasis
Danger (Alias of Emphasis)
Flat
Border (Alias of Flat)
Link
`

$3

`js
Large
Large
Medium
Medium
Small
Small
Extra Small
Extra Small
`

$3

`js
Normal
Hover
Active
Focus
Disabled
`

$3

`js
Block Button
`

$3

#### Default button group

`js

Left
Middle
Right





`

#### Flat button group

`js

Left
Middle
Right






`

#### Vertical button group

`js

Top
Middle
Bottom

`

$3

`js


Button Group 1
Button Group 1


Button Group 2
Button Group 2


`

$3

#### Static (default)

`js


Download



Add Account

`

$3

`js


Uploading



Uploading

`

#### Static (flat)

`js


Edit



Delete



Library

`

#### Compact

`js












``

API

$3

#### Button

Name | Type | Default | Description
:--- | :--- | :------ | :----------
componentClass | Function or String | 'button' |
type | One of:
'button'
'reset'
'submit' | 'button' |
btnSize | One of:
'lg'
'md'
'sm'
'xs'
'large'
'medium'
'small'
'extra-small' | 'md' |
btnStyle | One of:
'default'
'primary'
'danger'
'emphasis'
'border'
'flat'
'link'
| 'default' |
active | Boolean | false |
hover | Boolean | false |
focus | Boolean | flase |
disabled | Boolean | flase |
block | Boolean | false |
compact | Boolean | false |

#### ButtonGroup

Name | Type | Default | Description
:--- | :--- | :------ | :----------
btnSize | One of:
'lg'
'md'
'sm'
'xs'
'large'
'medium'
'small'
'extra-small' | |
btnStyle | One of:
'default'
'primary'
'danger'
'emphasis'
'border'
'flat'
'link'
| |
vertical | Boolean | false |

#### ButtonToolbar

Name | Type | Default | Description
:--- | :--- | :------ | :----------

License

MIT