# Button Button has two modes of operation: 1. stateless (like a normal ` ``` > 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. ```jsx ``` ## Installation ```bash npm i boundless-button --save ``` Then use it like: ```jsx /** @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 (
); } } ``` Button can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { Button } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Button). ### 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-`