react-buttons 
React Buttons component.
Demo: https://trendmicro-frontend.github.io/react-buttons
Installation
- Install the latest version of react and react-buttons:
npm install --save react @trendmicro/react-buttons
- At this point you can import
@trendmicro/react-buttonsand its styles in your application as follows:
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
import '@trendmicro/react-buttons/dist/react-buttons.css';
export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';Then, import Button component in your code:
import { Button } from './components/Buttons';Usage
Button Styles
<Button btnStyle="default">Default</Button>
<Button btnStyle="primary">Primary</Button>
<Button btnStyle="emphasis">Emphasis</Button>
<Button btnStyle="danger">Danger (Alias of Emphasis)</Button>
<Button btnStyle="flat">Flat</Button>
<Button btnStyle="border">Border (Alias of Flat)</Button>
<Button btnStyle="link">Link</Button>Button Sizes
<Button btnSize="lg">Large</Button>
<Button btnSize="large">Large</Button>
<Button btnSize="md">Medium</Button>
<Button btnSize="medium">Medium</Button>
<Button btnSize="sm">Small</Button>
<Button btnSize="small">Small</Button>
<Button btnSize="xs">Extra Small</Button>
<Button btnSize="extra-small">Extra Small</Button>Button States
<Button>Normal</Button>
<Button hover>Hover</Button>
<Button active>Active</Button>
<Button focus>Focus</Button>
<Button disabled>Disabled</Button>Block Buttons (Full-width Buttons)
<Button block>Block Button</Button>Button Groups
Default button group
<ButtonGroup>
<Button active>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup>
<Button compact><i className="fa fa-pencil" /></Button>
<Button compact><i className="fa fa-mail-reply" /></Button>
</ButtonGroup>Flat button group
<ButtonGroup btnStyle="flat" btnSize="md">
<Button active>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup btnStyle="flat" btnSize="md">
<Button compact><i className="fa fa-pie-chart" /></Button>
<Button compact><i className="fa fa-line-chart" /></Button>
<Button compact><i className="fa fa-table" /></Button>
</ButtonGroup>Vertical button group
<ButtonGroup vertical>
<Button>Top</Button>
<Button>Middle</Button>
<Button>Bottom</Button>
</ButtonGroup>Button Toolbar
<ButtonToolbar>
<ButtonGroup>
<Button>Button Group 1</Button>
<Button>Button Group 1</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Button Group 2</Button>
<Button>Button Group 2</Button>
</ButtonGroup>
</ButtonToolbar>Button (w/ Icon)
Static (default)
<Button>
<i className="fa fa-download" />
Download
</Button>
<Button btnStyle="primary">
<i className="fa fa-plus" />
Add Account
</Button>Progressing
<Button disabled>
<i className="fa fa-circle-o-notch fa-spin" />
Uploading
</Button>
<Button btnStyle="primary" disabled>
<i className="fa fa-circle-o-notch fa-spin" />
Uploading
</Button>Static (flat)
<Button btnStyle="flat">
<i className="fa fa-pencil fa-fw" />
Edit
</Button>
<Button btnStyle="flat">
<i className="fa fa-trash-o fa-fw" />
Delete
</Button btnStyle="flat">
<Button>
<i className="fa fa-book fa-fw" />
Library
</Button>Compact
<Button compact>
<i className="fa fa-comment" />
</Button>
<Button btnStyle="primary" compact>
<i className="fa fa-plus" />
</Button>
<Button btnStyle="emphasis" compact>
<i className="fa fa-search" />
</Button>
<Button btnStyle="flat" compact>
<i className="fa fa-cog" />
</Button>API
Properties
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