button.md

Buttons/Button

Standard button.

<div>
    <Button type="primary" size="large">Button</Button>
    <Button type="secondary" size="large">Button</Button>
    <Button type="cta" size="large">Button</Button>
</div>

import { faBug } from '@fortawesome/free-solid-svg-icons';

<div>
    <Button type="primary" size="large">
        <Icon name={faBug} />
        Button
    </Button>
    <Button type="secondary" size="large">
        <Icon name={faBug} />
        Button
    </Button>
    <Button type="cta" size="large">
        <Icon name={faBug} />
        Button
    </Button>
</div>

import { faPlus } from '@fortawesome/free-solid-svg-icons';

<div>
    <Button shape="square" type="secondary" size="small">
        <Icon name={faPlus} />
    </Button>&nbsp;
    <Button shape="square" type="secondary" size="medium">
        <Icon name={faPlus} />
    </Button>&nbsp;
    <Button shape="square" type="secondary" size="large">
        <Icon name={faPlus} />
    </Button>
</div>

import { faPlus } from '@fortawesome/free-solid-svg-icons';

<div>
    <Button shape="round" type="secondary" size="small">
        <Icon name={faPlus} />
    </Button>&nbsp;
    <Button shape="round" type="secondary" size="medium">
        <Icon name={faPlus} />
    </Button>&nbsp;
    <Button shape="round" type="secondary" size="large">
        <Icon name={faPlus} />
    </Button>
</div>

Props

size={string}
One of "large", "medium", or "small".

type={string}
Controls the color of the button. One of "primary", "secondary", or "cta".

shape={string}
Controls the shape of the button. One of "default", "square", or "round".

disabled={bool}
Whether or not the button is disabled or not.

CSS

Adds dp-button to the root element.

Adds dp-button--${type} where ${type} is the value of the type prop.

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'Components/Buttons';
import Icon from 'Components/Icon';

const App = () => (
    <div>
        <Button size="large">Button</Button>
        <Button size="medium">
            <Icon name="bug" />
            Button with icon
        </Button>
    </div>
);

ReactDOM.render(<App />, document.getElementById('mount'));