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:

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';

Recommended Setup

Create a Buttons component inside your common components directory:

components/
  Buttons/
    index.js

components/Buttons/index.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:

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

Properties

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