Buttons

import React from 'react';
import { Button } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Button color="primary">primary</Button> <Button color="secondary">secondary</Button>{' '}
                <Button color="alternative">alternative</Button> <Button color="success">success</Button>{' '}
                <Button color="info">info</Button> <Button color="warning">warning</Button>{' '}
                <Button color="danger">danger</Button> <Button color="link">link</Button>
            </div>
        );
    }
}

Properties

Button.propTypes = {
  active: PropTypes.bool,
  block: PropTypes.bool,
  color: PropTypes.string, // default: 'secondary'
  disabled: PropTypes.bool,

  // Pass in a Component to override default button element
  // example: react-router Link
  // default: 'button'
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

  // ref will only get you a reference to the Button component, use innerRef to get a reference to the DOM element (for things like focus management).
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

  onClick: PropTypes.func,
  size: PropTypes.string,

  href: ?string,
}

Outline Buttons

import React from 'react';
import { Button } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Button outline color="primary">
                    primary
                </Button>{' '}
                <Button outline color="secondary">
                    secondary
                </Button>{' '}
                <Button outline color="alternative">
                    alternative
                </Button>{' '}
                <Button outline color="success">
                    success
                </Button>{' '}
                <Button outline color="info">
                    info
                </Button>{' '}
                <Button outline color="warning">
                    warning
                </Button>{' '}
                <Button outline color="danger">
                    danger
                </Button>
            </div>
        );
    }
}

Sizes

<Button color="primary" size="lg">Large Button</Button>{' '}
<Button color="secondary" size="lg">Large Button</Button>

<Button color="primary" size="sm">Small Button</Button>{' '}
<Button color="secondary" size="sm">Small Button</Button>

<Button color="primary" size="lg" block>Block level button</Button>
<Button color="secondary" size="lg" block>Block level button</Button>

Primary & Alternative Button with icon

import React from 'react';
import { Button, SvgIcon } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Button color="primary">
                    <span className="mr-5">
                        <SvgIcon kind="Play" className="icon" />
                    </span>
                    Primary
                </Button>{' '}
                <Button color="primary" outline>
                    <span className="mr-5">
                        <SvgIcon kind="Play" className="icon" />
                    </span>
                    Primary Outline
                </Button>{' '}
                <Button color="alternative">
                    <span className="mr-5">
                        <SvgIcon kind="Certificate" className="icon" />
                    </span>
                    Alternative
                </Button>{' '}
                <Button color="alternative" outline>
                    <span className="mr-5">
                        <SvgIcon kind="Certificate" className="icon" />
                    </span>
                    Alternative Outline
                </Button>{' '}
            </div>
        );
    }
}

Active State

<Button color="primary" size="lg" active>Primary link</Button>{' '}
<Button color="secondary" size="lg" active>Link</Button>

Disabled State

<Button color="primary" size="lg" disabled>Primary button</Button>{' '}
<Button color="secondary" size="lg" disabled>Button</Button>{' '}
<Button color="secondary" size="lg" disabled className="btn-secondary-no-hover">Button with disabled hover</Button>