https://github.com/trendmicro-frontend/react-buttons

React Buttons component
https://github.com/trendmicro-frontend/react-buttons

button button-group button-toolbar buttons react

Last synced: 11 days ago
JSON representation

React Buttons component

• Host: GitHub
• URL: https://github.com/trendmicro-frontend/react-buttons
• Owner: trendmicro-frontend
• License: mit
• Created: 2016-12-09T07:51:37.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-22T14:08:05.000Z (over 1 year ago)
• Last Synced: 2024-12-12T09:59:38.989Z (about 1 month ago)
• Topics: button, button-group, button-toolbar, buttons, react
• Language: Stylus
• Homepage: https://trendmicro-frontend.github.io/react-buttons
• Size: 3.22 MB
• Stars: 12
• Watchers: 19
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-buttons - React Buttons component ([demo](https://trendmicro-frontend.github.io/react-buttons/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-buttons - React Buttons component ([demo](https://trendmicro-frontend.github.io/react-buttons/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-buttons - React Buttons component ([demo](https://trendmicro-frontend.github.io/react-buttons/)). (Trend Micro / React Components)

README

        
# react-buttons [![build status](https://travis-ci.org/trendmicro-frontend/react-buttons.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-buttons) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-buttons/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-buttons?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-buttons.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-buttons/)

React Buttons component.

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

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-buttons](https://github.com/trendmicro-frontend/react-buttons):

  ```

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

  ```

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

  ```js

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

```js

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

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

```

Then, import `Button` component in your code:

```js

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

```

## Usage

### Button Styles

```js

Default

Primary

Emphasis

Danger (Alias of Emphasis)

Flat

Border (Alias of Flat)

Link

```

### Button Sizes

```js

Large

Large

Medium

Medium

Small

Small

Extra Small

Extra Small

```

### Button States

```js

Normal

Hover

Active

Focus

Disabled

```

### Block Buttons (Full-width Buttons)

```js

Block Button

```

### Button Groups

#### Default button group

```js

    Left

    Middle

    Right

    

    

```

#### Flat button group

```js

    Left

    Middle

    Right

    

    

    

```

#### Vertical button group

```js

    Top

    Middle

    Bottom

```

### Button Toolbar

```js

    

        Button Group 1

        Button Group 1

    

    

        Button Group 2

        Button Group 2

    

```

### Button (w/ Icon)

#### Static (default)

```js

    

    Download

    

    Add Account

```

### Progressing

```js

    

    Uploading

    

    Uploading

```

#### Static (flat)

```js

    

    Edit

    

    Delete

    

    Library

```

#### Compact

```js

    

    

    

    

```

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