adding button docs

This commit is contained in:
Alex Windett 2017-04-06 16:21:23 +01:00 committed by Judit Greskovits
parent 0127f76a7d
commit 968a6914f5
2 changed files with 36 additions and 50 deletions

View File

@ -1,51 +1,35 @@
# `<Button>`
# Button
## demo
### Description
An HTML button element with styles and functionality applied according to props.
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Button = require('./index.js');
const styles = require('./style.css');
If no props are defined, a "primary" button with no routing capabilities will be
rendered.
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Button>
Create an Instance
</Button>
</Column>
<Column>
<Button secondary>
Cancel
</Button>
</Column>
<Column>
<Button disabled>
Inactive Button
</Button>
</Column>
</Row>
</Base>
);
```
## usage
### Usage
```js
const React = require('react');
const Button = require('ui/button');
import Button from '@ui/components/button';
module.exports = () => {
return (
<Button>
Hello World
</Button>
);
}
<div>
<Button>Hello</Button>
<Button primary>Primary</Button>
<Button secondary>Secondary</Button>
<Button disabled>Disabled</Button>
<Button to='/hello'>To</Button>
<Button href='/world'>href</Button>
</div>
```
### Properties
| propName | propType | defaultValue | isRequired |
|----------|----------|--------------|------------|
| href | string | - | |
| to | string | - | |
| secondary | bool | false | |
| disabled | bool | false | |
| tertiary | bool | false | |
## Roadmap
* `onClick` - click callback
* `label` - button accessibility tag

View File

@ -1,26 +1,28 @@
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import withReadme from 'storybook-readme/with-readme';
import Button from './';
import README from './readme.md';
storiesOf('Button', module)
.add('With text', () => (
.add('With text', withReadme(README, () => (
<Button>
Inspire the lazy
</Button>
)).add('Secondary', () => (
))).add('Secondary', withReadme(README, () => (
<Button secondary>
Inspire the brave
</Button>
)).add('Tertiary', () => (
))).add('Tertiary', withReadme(README, () => (
<Button tertiary>
Inspire the tertiary
</Button>
)).add('Disabled', () => (
))).add('Disabled', withReadme(README, () => (
<Button disabled>
Inspire the liars
</Button>
)).add('Anchor', () => (
))).add('Anchor', withReadme(README, () => (
<Button href='#'>
Inspire the anchor
</Button>
));
)));