boundless-button

Button

A control with "pressed" state support.

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>
   

Example Usage

import React from 'react';
import Button from '../index';

export default class ButtonDemo extends React.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>
        );
    }
}

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

  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

// Bring in Boundless's base Stylus variables
@require "node_modules/boundless-button/variables"

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