import devcards from '../';
import React from 'react';
import Button from './Button';

var devcard = devcards.ns('buttons');

devcard(
  'Buttons',
  `
  A simple display of bootstrap buttons.

  * default
  * primary
  * success
  * info
  * warning
  * danger
  * link
  `,
  (
    <div>
      <Button kind="default">default</Button>
      <Button kind="primary">primary</Button>
      <Button kind="success">success</Button>
      <Button kind="info">info</Button>
      <Button kind="warning">warning</Button>
      <Button kind="danger">danger</Button>
      <Button kind="link">link</Button>
    </div>
  )
);

import devcards from '../';
import React from 'react';
import Button from './Button';

var devcard = devcards.ns('buttons');

devcard(
  'Buttons',
  `
  A simple display of bootstrap buttons.

  * default
  * primary
  * success
  * info
  * warning
  * danger
  * link
  `,
  <div style={{textAlign: 'center'}}>
    <Button kind="default">default</Button>
    <Button kind="primary">primary</Button>
    <Button kind="success">success</Button>
    <Button kind="info">info</Button>
    <Button kind="warning">warning</Button>
    <Button kind="danger">danger</Button>
    <Button kind="link">link</Button>
  </div>
);

Align as an option isn't ideal, include inline style example instead
Align as an option isn't ideal, include inline style example instead

There are two ways to center align in CSS, neither work well to
integrate into the card system

1) text-align: center
this cascades into all children, and would force the consumer to
override text-align back to what they wanted on other elements

2) margin-left/right: auto
this only works on components with fixed width
