react-button
A carefully crafted button for React
Install
$ npm install react-button --save
Changelog
See Changelog
Usage
var Button = {} <Button = >Export</Button> <Button =>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{ pressed = !pressed //now re-render}//controlled behavior<Button = =/> //uncontrolled<Button = = />
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 ='' = />
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 = =/>
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 = themesthemesgray = style: ... overStyle: ...<Button = /> //since 'gray' is added to the exported theme object,//you can use it as a named theme<Button ='gray' />
You can style different button states - over (when mouse is over button), active (when mouse is down on the button)
<Button = = />
If you specify overStyle
, activeStyle
, pressedStyle
, overPressedStyle
etc, you are overwriting the values from the theme. The theme styles have the lowest precedence.
Properties
Actions
- onClick: Function - function to be called when the button is clicked
- onToggle: Function(pressed: boolean, event) - called on a button that specifies either
pressed
ordefaultPressed
(as boolean values). This is called beforeonClick
- onActivate: Function - function called on mousedown over the button - button becomes active
- onDeactivate: Function - function called on mouseup - button becomes inactive
Styling
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 = var themes = Buttonthemes themesdefaultstyle = ... themesdefaultoverStyle = ... <Button>save</Button>
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
-
focusedPressedStyle
-
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
. Specifyblock: true
if you want to usedisplay: 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
)
Contributing
$ 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