Button
Button has two modes of operation:
-
stateless (like a normal
<button>
)<Button =>foo</Button>Note that instead of
onClick
, Button usesonPressed
. This is because the component also listens for keyboard Enter events, soonClick
only tells half the story. You can still bind to that particular React event though if there's a need to tell the difference between clicks and Enter presses. -
stateful (like a toggle, e.g. bold-mode in a rich text editor) "stateful" mode is triggered by passing a boolean to
props.pressed
. This enables the button to act like a controlled component. TheonUnpressed
event callback will also now be fired when appropriate.<Button===>foo</Button>
Installation
npm i boundless-button --save
Then use it like:
/** @jsx createElement */ import createElement PureComponent from 'react';import Button from 'boundless-button'; state = pressed: false { // eslint-disable-next-line no-alert ; } { this; } { this; } { return <div> <Button => Click Me </Button> <Button = = => thisstatepressed ? 'Pressed' : 'Unpressed' </Button> <Button = => Disabled </Button> </div> ; }
Button can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
;
Props
Note: only top-level props are in the README, for the full list check out the website.
Required Props
There are no required props.
Optional Props
-
*
· any React-supported attributeExpects Default Value any
n/a
-
component
· any valid HTML tag name or a ReactComponent, anything that can be passed as the first argument toReact.createElement
; note that this component sets therole
andaria-checked
attributes so non-<button>
elements will still behave like a button for screen readersExpects Default Value string or function
'button'
-
onPressed
· use this callback instead ofonClick
(it'sonClick
+onKeyDown:Enter
); fires for both button modesExpects Default Value function
() => {}
-
onUnpressed
· called when the element becomes "unpressed"; only fires when the Button is in stateful modeExpects Default Value function
() => {}
-
pressed
· passthrough toaria-pressed
; using this prop turns on theonUnpressed
callback when applicableExpects Default Value bool
undefined
Reference Styles
Stylus
You can see what variables are available to override in variables.styl.
// Redefine any variables as desired, e.g:color-accent = royalblue // Bring in the component styles; they will be autoconfigured based on the above@require "node_modules/boundless-button/style"
CSS
If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css
, based on Boundless's default variables.