1 | import React from 'react';
|
2 | import { md, Example, Props, code } from '@kalamazoo/docs';
|
3 |
|
4 | export default md`
|
5 |
|
6 | Buttons are used as triggers for actions. They are used in forms, toolbars,
|
7 | dialog footers and as stand-alone action triggers.
|
8 |
|
9 | Button also exports a button-group component to make it easy to display
|
10 | multiple buttons together.
|
11 |
|
12 | ## Usage
|
13 |
|
14 | ${code`import Button, { ButtonGroup } from '@kalamazoo/button';`}
|
15 |
|
16 | ${(
|
17 | <Example
|
18 | packageName="@kalamazoo/button"
|
19 | Component={require('../examples/10-Button').default}
|
20 | title="Basic Button"
|
21 | source={require('!!raw-loader!../examples/10-Button')}
|
22 | />
|
23 | )}
|
24 |
|
25 | ${(
|
26 | <Example
|
27 | packageName="@kalamazoo/button"
|
28 | Component={require('../examples/30-Appearances').default}
|
29 | title="Your Appearance Options"
|
30 | source={require('!!raw-loader!../examples/30-Appearances')}
|
31 | />
|
32 | )}
|
33 |
|
34 | #### You can also use button groups:
|
35 |
|
36 | ${(
|
37 | <Example
|
38 | packageName="@kalamazoo/button"
|
39 | Component={require('../examples/20-ButtonGroup').default}
|
40 | title="Simple Button Group"
|
41 | source={require('!!raw-loader!../examples/20-ButtonGroup')}
|
42 | />
|
43 | )}
|
44 |
|
45 | ${(
|
46 | <Props
|
47 | heading="Button Props"
|
48 | props={require('!!extract-react-types-loader!../src/components/ButtonProps/ButtonProps')}
|
49 | />
|
50 | )}
|
51 |
|
52 | ${(
|
53 | <Props
|
54 | heading="Button Group Props"
|
55 | props={require('!!extract-react-types-loader!../src/components/ButtonGroup')}
|
56 | />
|
57 | )}
|
58 | `;
|
59 |
|
\ | No newline at end of file |