Nascent Plasticine Materialist
    Have ideas to improve npm?Join in the discussion! »

    @trendmicro/react-buttons

    1.3.1 • Public • Published

    react-buttons build status Coverage Status

    NPM

    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-buttons
    
    1. 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>

    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>

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

    Install

    npm i @trendmicro/react-buttons

    DownloadsWeekly Downloads

    4,654

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    98.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar