@trendmicro/react-buttons

react-buttons

React Buttons component.

Demo: https://trendmicro-frontend.github.io/react-buttons

Installation

1. Install the latest version of react and react-buttons:

npm install --save react @trendmicro/react-bttons

1. At this point you can import @trendmicro/react-buttons and its styles in your application as follows:

import { Button, ButtonGroup, ButtonToolbar, ButtonDropdown } from '@trendmicro/react-buttons';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-buttons/dist/react-buttons.css';

Usage

Button Styles

<Button btnStyle="default">Default</Button>
<Button btnStyle="primary">Primary</Button>
<Button btnStyle="emphasis">Emphasis</Button>
<Button btnStyle="danger">Danger (Alias of Emphasis)</Button>
<Button btnStyle="flat">Flat</Button>
<Button btnStyle="border">Border (Alias of Flat)</Button>
<Button btnStyle="link">Link</Button>

Button Sizes

<Button btnSize="lg">Large</Button>
<Button btnSize="large">Large</Button>
<Button btnSize="md">Medium</Button>
<Button btnSize="medium">Medium</Button>
<Button btnSize="sm">Small</Button>
<Button btnSize="small">Small</Button>
<Button btnSize="xs">Extra Small</Button>
<Button btnSize="extra-small">Extra Small</Button>

Button States

<Button>Normal</Button>
<Button hover>Hover</Button>
<Button active>Active</Button>
<Button focus>Focus</Button>
<Button disabled>Disabled</Button>

Block Buttons (Full-width Buttons)

<Button block>Block Button</Button>

Button Groups

Default button group

<ButtonGroup>
    <Button active>Left</Button>
    <Button>Middle</Button>
    <Button>Right</Button>
</ButtonGroup>
<ButtonGroup>
    <Button iconOnly><i className="fa fa-pencil" /></Button>
    <Button iconOnly><i className="fa fa-mail-reply" /></Button>
</ButtonGroup>

Flat button group

<ButtonGroup>
    <Button btnStyle="flat" active>Left</Button>
    <Button btnStyle="flat">Middle</Button>
    <Button btnStyle="flat">Right</Button>
</ButtonGroup>
<ButtonGroup>
    <Button btnStyle="flat" iconOnly><i className="fa fa-pie-chart" /></Button>
    <Button btnStyle="flat" iconOnly><i className="fa fa-line-chart" /></Button>
    <Button btnStyle="flat" iconOnly><i className="fa fa-table" /></Button>
</ButtonGroup>

Vertical button group

<ButtonGroup vertical>
    <Button>Top</Button>
    <Button>Middle</Button>
    <Button>Bottom</Button>
</ButtonGroup>

Button Toolbar

<ButtonToolbar>
    <ButtonGroup>
        <Button>Button Group 1</Button>
        <Button>Button Group 1</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button>Button Group 2</Button>
        <Button>Button Group 2</Button>
    </ButtonGroup>
</ButtonToolbar>

Button (w/ Icon)

Static (default)

<Button>
    <i className="fa fa-download" />
    Download
</Button>
<Button btnStyle="primary">
    <i className="fa fa-plus" />
    Add Account
</Button>

Progressing

<Button disabled>
    <i className="fa fa-circle-o-notch fa-spin" />
    Uploading
</Button>
<Button btnStyle="primary" disabled>
    <i className="fa fa-circle-o-notch fa-spin" />
    Uploading
</Button>

Static (flat)

<Button btnStyle="flat">
    <i className="fa fa-pencil fa-fw" />
    Edit
</Button>
<Button btnStyle="flat">
    <i className="fa fa-trash-o fa-fw" />
    Delete
</Button btnStyle="flat">
<Button>
    <i className="fa fa-book fa-fw" />
    Library
</Button>

Icon only

<Button iconOnly>
    <i className="fa fa-comment" />
</Button>
<Button btnStyle="primary" iconOnly>
    <i className="fa fa-plus" />
</Button>
<Button btnStyle="emphasis" iconOnly>
    <i className="fa fa-search" />
</Button>
<Button btnStyle="flat" iconOnly>
    <i className="fa fa-cog" />
</Button>

Dropdown Buttons

Single

<Button
    dropdown
    placeholder="Select..."
    options={[
        { label: 'Action', value: 'v1' },
        { label: 'Another action', value: 'v2' },
        { label: 'Something else here', value: 'v3' }
    ]}
    onChange={(selectedOption) => {
        if (selectedOption) {
            console.log('label =' + selectedOption.label + ', value = ' + selectedOption.value);
        }
    }}
/>

Split

<Button
    dropdown
    dropdownStyle="split"
    placeholder="Select..."
    options={[
        { label: 'Action', value: 'v1' },
        { label: 'Another action', value: 'v2' },
        { label: 'Something else here', value: 'v3' }
    ]}
/>

Fixed width

<Button
    dropdown
    placeholder="Select..."
    options={[
        { label: 'Action', value: 'v1' },
        { label: 'Another action', value: 'v2' },
        { label: 'Something else here', value: 'v3' }
    ]}
    value="v1"
    fixedWidth={true}
/>

Text

<Button
    dropdown
    dropdownStyle="text"
    options={[
        { label: 'Action', value: 'v1' },
        { label: 'Another action', value: 'v2' },
        { label: 'Something else here', value: 'v3' }
    ]}
>
    All Devices
</Button>

Icon

<Button
    dropdown
    dropdownStyle="text"
    options={[
        { label: 'Action', value: 'v1' },
        { label: 'Another action', value: 'v2' },
        { label: 'Something else here', value: 'v3' }
    ]}
    customValueRenderer={(option) => {
        return (
            <div>
                <i className="fa fa-database" />
                <span>{option.label}</span>
            </div>
        );
    }}
>
    All Devices
</Button>

Dropdown Sizes

<Button btnSize="large" dropdown>Large</Button>
<Button btnSize="medium" dropdown>Default</Button>
<Button btnSize="small" dropdown>Small</Button>
<Button btnSize="extra-small" dropdown>Extra Small</Button>

License

MIT