react-btn

Inspired by Bootstrap's 3.x buttons, react-btn is a simple React component that allows you renders a pretty button element.

Installation

The easiest way to use react-btn is to install it from NPM and include it in your React build process (using Webpack, etc).

npm install react-btn --save

You can also use the standalone build by including dist/react-btn.js and dist/react-btn.css in your page. If you do this, make sure you already included the following dependencies:

• React
• classNames

Usage

CommonJS:

var Button = require('react-btn');

<Button btnStyle="info" size="xs">
  Tiny button
</Button>
<Button size="sm">
  Small, default button
</Button>
<Button btnStyle="primary" type="submit">
  Submit button
</Button>
<Button btnStyle="warning" size="lg">
  Warning button
</Button>
<Button btnStyle="danger">
  Danger!
</Button>

Browser:

React.createElement(ReactBtn, {btnStyle: 'info', size: 'sm', type: 'submit'}, 'Small Submit Button');

CSS stylesheet

I've built a default stylesheet, dist/react-btn.css, that you may include in your sites/projects.

You can customize the styles by modifying the stylesheet itself or by using less and modifying the less files in the /less directory.

Examples

• Showcase