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
|
If no props are defined, a "primary" button with no routing capabilities will be
|
||||||
const React = require('react');
|
rendered.
|
||||||
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');
|
|
||||||
|
|
||||||
nmodule.exports = ReactDOM.renderToString(
|
### Usage
|
||||||
<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
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const React = require('react');
|
import Button from '@ui/components/button';
|
||||||
const Button = require('ui/button');
|
|
||||||
|
|
||||||
module.exports = () => {
|
<div>
|
||||||
return (
|
<Button>Hello</Button>
|
||||||
<Button>
|
<Button primary>Primary</Button>
|
||||||
Hello World
|
<Button secondary>Secondary</Button>
|
||||||
</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 React from 'react';
|
||||||
import { storiesOf } from '@kadira/storybook';
|
import { storiesOf } from '@kadira/storybook';
|
||||||
|
import withReadme from 'storybook-readme/with-readme';
|
||||||
import Button from './';
|
import Button from './';
|
||||||
|
import README from './readme.md';
|
||||||
|
|
||||||
storiesOf('Button', module)
|
storiesOf('Button', module)
|
||||||
.add('With text', () => (
|
.add('With text', withReadme(README, () => (
|
||||||
<Button>
|
<Button>
|
||||||
Inspire the lazy
|
Inspire the lazy
|
||||||
</Button>
|
</Button>
|
||||||
)).add('Secondary', () => (
|
))).add('Secondary', withReadme(README, () => (
|
||||||
<Button secondary>
|
<Button secondary>
|
||||||
Inspire the brave
|
Inspire the brave
|
||||||
</Button>
|
</Button>
|
||||||
)).add('Tertiary', () => (
|
))).add('Tertiary', withReadme(README, () => (
|
||||||
<Button tertiary>
|
<Button tertiary>
|
||||||
Inspire the tertiary
|
Inspire the tertiary
|
||||||
</Button>
|
</Button>
|
||||||
)).add('Disabled', () => (
|
))).add('Disabled', withReadme(README, () => (
|
||||||
<Button disabled>
|
<Button disabled>
|
||||||
Inspire the liars
|
Inspire the liars
|
||||||
</Button>
|
</Button>
|
||||||
)).add('Anchor', () => (
|
))).add('Anchor', withReadme(README, () => (
|
||||||
<Button href='#'>
|
<Button href='#'>
|
||||||
Inspire the anchor
|
Inspire the anchor
|
||||||
</Button>
|
</Button>
|
||||||
));
|
)));
|
||||||
|
Loading…
Reference in New Issue
Block a user