adding button docs
This commit is contained in:
parent
0127f76a7d
commit
968a6914f5
@ -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
|
@ -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>
|
||||
));
|
||||
)));
|
||||
|
Loading…
Reference in New Issue
Block a user