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

Recommended Setup

Create a Buttons component inside your common components directory:

components/
  Buttons/
    index.js

components/Buttons/index.js

import '@trendmicro/react-buttons/dist/react-buttons.css';

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

Then, import Button component in your code:

import { Button } from './components/Buttons';

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 compact><i className="fa fa-pencil" /></Button>
    <Button compact><i className="fa fa-mail-reply" /></Button>
</ButtonGroup>

Flat button group

<ButtonGroup btnStyle="flat" btnSize="md">
    <Button active>Left</Button>
    <Button>Middle</Button>
    <Button>Right</Button>
</ButtonGroup>
<ButtonGroup btnStyle="flat" btnSize="md">
    <Button compact><i className="fa fa-pie-chart" /></Button>
    <Button compact><i className="fa fa-line-chart" /></Button>
    <Button compact><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>

Compact

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

API

Properties

Button

Name	Type	Default
componentClass	Function or String	'button'
type	One of: 'button' 'reset' 'submit'	'button'
btnSize	One of: 'lg' 'md' 'sm' 'xs' 'large' 'medium' 'small' 'extra-small'	'md'
btnStyle	One of: 'default' 'primary' 'danger' 'emphasis' 'border' 'flat' 'link'	'default'
active	Boolean	false
hover	Boolean	false
focus	Boolean	flase
disabled	Boolean	flase
block	Boolean	false
compact	Boolean	false

ButtonGroup

Name	Type	Default
btnSize	One of: 'lg' 'md' 'sm' 'xs' 'large' 'medium' 'small' 'extra-small'
btnStyle	One of: 'default' 'primary' 'danger' 'emphasis' 'border' 'flat' 'link'
vertical	Boolean	false

ButtonToolbar

Name	Type	Default	Description

License

MIT

@trendmicro/react-buttons