split_button.md

Buttons/SplitButton

Renders a button with a left side and right side, where clicking the right side opens a popper.

<SplitButton type="primary" size="large">
    Primary large
    <ButtonPopper>
        Hello!
    </ButtonPopper>
</SplitButton>

Props

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

type={string}
One of "primary", "secondary", or "cta".

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

onClick={func}
Called when the left side of the button is clicked.

CSS

Adds dp-split-button to the root element.

Examples

import React from 'react';
import { render } from 'react-dom';
import { SplitButton, ButtonPopper } from 'Components/Buttons';

const App = () => (
    <div>
        <SplitButton type="primary" size="large">
            Click Me
            <ButtonPopper>
                I am popper.
            </ButtonPopper>
        </SplitButton>
    </form>
);

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