Basic button:

```jsx
<Button2>Push Me</Button2>
```

Big pink button:

```jsx
<Button2 size="large" color="deeppink">
  Click Me
</Button2>
```

And you _can_ **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.

Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:

```jsx
<Button2>Push Me</Button2>
```

You can add a custom props to an example wrapper (` ```js { "props": { "className": "checks" } } `):

```js { "props": { "className": "checks" } }
<Button2>I’m transparent!</Button2>
```

Or disable an editor by passing a `noeditor` modifier (` ```js noeditor `):

```jsx noeditor
<Button2>Push Me</Button2>
```

To render an example as highlighted source code add a `static` modifier: (` ```js static `):

```js static
import React from "react";
```

Fenced blocks with other languages are rendered as highlighted code:

```html
<h1>Hello world</h1>
```

Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`:

```jsx
<div>
  <Button2
    size="small"
    onClick={() => setState({ isOpen: true })}
    disabled={state.isOpen}
  >
    Show Me
  </Button2>
  {state.isOpen && (
    <Button2 size="small" onClick={() => setState({ isOpen: false })}>
      Hide Me
    </Button2>
  )}
</div>
```

You can change the default state:

```jsx
initialState = { count: 42 };
<Button2 onClick={() => setState({ count: state.count + 1 })}>
  {state.count}
</Button2>;
```