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-buttons
and its styles in your application as follows:
; // Be sure to include styles at some point, probably during your bootstraping;
Recommended Setup
Create a Buttons
component inside your common components directory:
components/
Buttons/
index.js
components/Buttons/index.js
; ;
Then, import Button
component in your code:
;
Usage
Button Styles
<Button btnStyle="default">Default</Button><Button btnStyle="primary">Primary</Button><Button btnStyle="emphasis">Emphasis</Button><Button btnStyle="danger"></Button><Button btnStyle="flat">Flat</Button><Button btnStyle="border"></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