Package Exports

@trendmicro/react-buttons
@trendmicro/react-buttons/dist/react-buttons.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@trendmicro/react-buttons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-buttons

React Buttons component.

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

Installation

Install the latest version of react and react-buttons:

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

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

import { Button, ButtonGroup, ButtonToolbar } 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>

<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>

License

MIT

@trendmicro/react-buttons