Trend Micro Components: React Buttons
npm install @trendmicro/react-buttons
React Buttons component.
Demo: https://trendmicro-frontend.github.io/react-buttons
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';
`
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';
`js`
`js`
`js`
`js`
#### Default button group
`js`
#### Flat button group
`js`
#### Vertical button group
`js`
`js`
#### Static (default)
`js`
`js`
#### Static (flat)
`js`
#### Compact
`js``
#### 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
:--- | :--- | :------ | :----------
MIT