Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-bootstrap-buttons

cheton995MIT1.0.0

React Bootstrap buttons.

react, bootstrap, buttons, component

readme

react-bootstrap-buttons build status Coverage Status

NPM

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

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:

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