THIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.

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

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

<tr>
    <td>children</td>
    <td><pre><code>any renderable</code></pre></td>
    <td><pre><code class="language-js">null</code></pre></td>
    <td></td>
</tr>

<tr>
    <td>component</td>
    <td><pre><code>string or function</code></pre></td>
    <td><pre><code class="language-js">'button'</code></pre></td>
    <td>Any valid HTML tag name or a React component factory, anything that can be passed as the first argument to `React.createElement`</td>
</tr>

<tr>
    <td>onClick</td>
    <td><pre><code>function</code></pre></td>
    <td><pre><code class="language-js">noop</code></pre></td>
    <td></td>
</tr>

<tr>
    <td>onPressed</td>
    <td><pre><code>function</code></pre></td>
    <td><pre><code class="language-js">noop</code></pre></td>
    <td>called when the element becomes "pressed" or triggered by the user (mouse or keyboard); backing data must be updated to persist the state change; this function will still be called if `props.pressed` is not passed</td>
</tr>

<tr>
    <td>onUnpressed</td>
    <td><pre><code>function</code></pre></td>
    <td><pre><code class="language-js">noop</code></pre></td>
    <td>called when the element becomes "unpressed"; backing data must be updated to persist the state change</td>
</tr>

<tr>
    <td>pressed</td>
    <td><pre><code>bool</code></pre></td>
    <td><pre><code class="language-js">undefined</code></pre></td>
    <td>enables "pressed" support and adds the `aria-pressed` attribute to the `.b-button` node; essentially a "stateful" button (see the "unpressed/pressed" example demo above)</td>
</tr>