boundless-button

Button

Button has two modes of operation:

1. stateless (like a normal <button>)

   <Button onPressed={doSomething}>foo</Button>
   

   Note that instead of onClick, Button uses onPressed. This is because the component also listens for keyboard Enter events, so onClick 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.

2. 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. The onUnpressed event callback will also now be fired when appropriate.

   <Button
       pressed={true}
       onPressed={doSomething}
       onUnpressed={doSomethingElse}>
       foo
   </Button>
   

Installation

npm i boundless-button --save

Then use it like:

/** @jsx createElement */

import { createElement, PureComponent } from 'react';
import Button from 'boundless-button';

export default class ButtonDemo extends PureComponent {
    state = {
        pressed: false,
    }

    handleClick = () => {
        // eslint-disable-next-line no-alert
        alert('A single-click was detected.');
    }

    handlePressed = () => {
        this.setState({ pressed: true });
    }

    handleUnpressed = () => {
        this.setState({ pressed: false });
    }

    render() {
        return (
            <div>
                <Button onPressed={this.handleClick}>
                    Click Me
                </Button>

                <Button
                    onPressed={this.handlePressed}
                    onUnpressed={this.handleUnpressed}
                    pressed={this.state.pressed}>
                    {this.state.pressed ? 'Pressed' : 'Unpressed'}
                </Button>

                <Button
                    onPressed={this.handleClick}
                    disabled={true}>
                    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:

import { Button } from 'boundless';

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 attribute] (https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects	Default Value
  any	n/a

• component · any valid HTML tag name or a ReactComponent, anything that can be passed as the first argument to React.createElement; note that this component sets the role and aria-checked attributes so non-<button> elements will still behave like a button for screen readers

  Expects	Default Value
  string or function	'button'

• onPressed · use this callback instead of onClick (it's onClick + onKeyDown:Enter); fires for both button modes

  Expects	Default Value
  function	() => {}

• onUnpressed · called when the element becomes "unpressed"; only fires when the Button is in stateful mode

  Expects	Default Value
  function	() => {}

• pressed · passthrough to aria-pressed; using this prop turns on the onUnpressed callback when applicable

  Expects	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.