React Button

Downloads in past


1.2.19 years ago10 years agoMinified + gzip package size for react-button in KB


A carefully crafted button for React


$ npm install react-button --save


See Changelog


var Button = require('react-button')

function clicked(event){}

<Button onClick={clicked} >Export</Button>

<Button activeStyle={{position:'relative', top: 1}}>Save as</Button>

react-button does not depend on any css files. All styles are inline in the react component.
react-button can also be used as a toggle button
var pressed = true
function toggle(){
	pressed = !pressed

	//now re-render
//controlled behavior
<Button pressed={pressed} onClick={toggle}/>

<Button defaultPressed={true} pressedStyle={{color: 'blue'}} />

Styling & advanced usage

By default, the button comes with some structural styles as well as with styles for a default nice theme.
If you don't want the button to render with the default theme, just specify theme='' (or any falsy value).
<Button theme='' onClick={function(){}} />

Or you can specify your own theme for the button. The value for the theme property is just an object with different styles
var theme = {
	disabledStyle: { background: 'gray'},
	overStyle: { background: 'red'},
	activeStyle: { background: 'red'},
	pressedStyle: {background: 'magenta', fontWeight: 'bold'},
	overPressedStyle: {background: 'purple', fontWeight: 'bold'}

<Button theme={theme} defaultPressed={true}/>
Or, you can specify a theme as string: 'default' or 'primary'. Those are the only two themes that come built into the ReactButton. You can get the styles for these:
var themes = require('react-button').themes
themes.gray = {
	style: {...},
	overStyle: {...}
<Button theme={themes.primary} />

//since 'gray' is added to the exported theme object,
//you can use it as a named theme
<Button theme='gray' />

You can style different button states - over (when mouse is over button), active (when mouse is down on the button)
<Button overStyle={{background: 'blue'}} activeStyle={{background: 'red'}} />
If you specify overStyle, activeStyle, pressedStyle, overPressedStyle etc, you are overwriting the values from the theme. The theme styles have the lowest precedence.



onClick: Function - function to be called when the button is clicked onToggle: Function(pressed: boolean, event) - called on a button that specifies either pressed or defaultPressed (as boolean values). This is called before onClick onActivate: Function - function called on mousedown over the button - button becomes active onDeactivate: Function - function called on mouseup - button becomes inactive


Theming props

theme: Object/String - a theme object (or a falsy value, if you don't want to render a themed button) or a string which should be a key from the exported Button.themes themes: Object - another object where to look for themes. This defaults to Button.themes, but it can be modified using this property
If you want to modify the default look for all buttons, just modify Button.themes.default
var Button = require('react-button')

var themes = Button.themes     = { ... }
themes.default.overStyle = { ... }


Style props

Style props are applied in this order:
style - default style disabledStyle - style to be applied when the button is disabled. If disabled, no other over/active/pressed styles are applied. focusedStyle - style to be applied to focused button pressedStyle
overStyle overFocusedStyle overPressedStyle overFocusedPressedStyle
activeStyle - style to be applied on active button (mousedown over button) activeFocusedStyle activePressedStyle activeFocusedPressedStyle
You can set all these props both on the theme object, or on the button itself.

Styling with CSS classes

overClassName: String - a css class to be applied when the mouse is over the button activeClassName: String - a css class to be applied when the mouse is pressed on the button (the button is in active state) focusedClassName: String - a css class to be applied when the button is focused disabledClassName: String - a css class to be applied when the button is disabled pressedClassName: String - a css class to be applied when the button is pressed

Other attributes

disabled: Boolean pressed: Boolean defaultPressed: Boolean label - (generally a string) you can specify a label instead of button children. If you specify the label, by default it will be rendered with text-overflow: 'ellipsis' href: String - a href to navigate to when the button is clicked. Defaults to '' align: String - where to align content inside button. Valid values are 'left', 'center', 'right' 'block': Boolean - by default buttons are rendered with display inline-flex. Specify block: true if you want to use display: flex (or use style.display: 'flex'). onStyleReady: Function - called after the style object is fully constructed onThemeStyleReady: Function - called after the theme styles have been applied to the style object (before onStyleReady)


$ npm install
$ npm run dev # to start webpack-dev-server
$ npm run serve # to start http-server on port 9091

now navigate to localhost:9091