react-bootstrap-buttons

react-bootstrap-buttons

React Bootstrap buttons.

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

Installation

• Install react-bootstrap-buttons:

npm install --save react-bootstrap-buttons

• 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