1.0.0 • Published 5 years ago
react-bootstrap-buttons v1.0.0
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:
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