react-bootstrap-buttons  


React Bootstrap buttons.

Demo: https://cheton.github.io/react-bootstrap-buttons

Installation

1. Install react-bootstrap-buttons:

``
npm install --save react-bootstrap-buttons
`

2. Import react-bootstrap-buttons and its styles in your application as follows:

`js
import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap-buttons';

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

$3

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

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

export { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap-buttons';
`

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

Examples

Examples for each component can be seen in the documentation.

Here are some online demos of each component:
* Button
* ButtonGroup
* ButtonToolbar

API

$3

#### Button

Name | Type | Default | Description
:--- | :--- | :------ | :----------
tag | Function or String | 'button' | Pass in a component to override default button element.
type | One of:
'button'
'reset'
'submit' | 'button' | Specifies the type of button.
lg | Boolean | | Large button.
md | Boolean | | Medium button.
sm | Boolean | | Small button.
xs | Boolean | | Extra small button.
btnStyle | One of:
'default'
'primary'
'secondary'
'danger'
'warning'
'info'
'success'
'light'
'dark'
'link'
| 'default' | Component visual or contextual style variants.
outline | Boolean | false | Specifies whether to remove background image and color on a button.
block | Boolean | false | Specifies whether to span the full width of a parent.
active | Boolean | false | Specifies whether to add active effect to a button.
hover | Boolean | false | Specifies whether to add hover effect to a button.
focus | Boolean | flase | Specifies whether to add focus effect to a button.
disabled | Boolean | flase | Specifies whether a button should be disabled or not.

#### ButtonGroup

Name | Type | Default | Description
:--- | :--- | :------ | :----------
lg | Boolean | | Large button group.
md | Boolean | | Medium button group.
sm | Boolean | | Small button group.
xs | Boolean | | Extra small button group.
btnStyle | One of:
'default'
'primary'
'secondary'
'danger'
'warning'
'info'
'success'
'light'
'dark'
'link'
| | Component visual or contextual style variants.
vertical | Boolean | false | Specifies whether a button group should be aligned vertically or not.

#### ButtonToolbar

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

License

MIT