View Source

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>

Installation#

npm i --save boundless-button

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';

Demo

Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string or function
Default Value
'button'

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

onPressed
Expects
function
Default Value
() => {}

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

onUnpressed
Expects
function
Default Value
() => {}

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

pressed
Expects
bool
Default Value
undefined

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