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';
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';
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. |
btnSize | One of: 'lg' 'md' 'sm' 'xs' 'large' 'medium' 'small' 'extra-small' | 'md' | Component size variations. |
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 |
---|
btnSize | One of: 'lg' 'md' 'sm' 'xs' 'large' 'medium' 'small' 'extra-small' | | Component size variations. |
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