# ReX React UI Component: button
This project is part of ReX Design System and it can be used to create UI Components compatible with:
React, HTML/CSS and Vue.js
# How to install
```
npm install @rakuten-rex/button@1.5.1 --save
```
```
yarn add @rakuten-rex/button@1.5.1
```
# Getting started
## Storybook Live examples
For a complete guide of properties for React and HTML classes please visit our Storybook page:
[](https://rakuten-rex.github.io/button/)
https://rakuten-rex.github.io/button/
**Storybook features**
- [x] Stories by component types
- [x] HTML raw output
- [x] JSX output
- [x] Stories source code
- [x] Knobs with multiple options
## ZeroHeight Documentation
For a complete Documentation including all ReX Design System Components, Live HTML/React examples and Demos please visit:
[](https://rakuten-rex.github.io/)
https://rakuten-rex.github.io/
# How to integrate ReX in your project
## A) JavaScript modules
### React component (JavaScript + CSS Styles)
For plug and play components integration.
Example:
`my-component.jsx`
```jsx
import Button from '@rakuten-rex/button';
function MyCustomComponent() {
return (
);
}
```
[Click here](https://rakuten-rex.github.io/button/) to see all working examples in Storybook.
### CSS Styles only
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
#### Using CSS Variables (Modern Websites and WebApps)
Example:
`my-component.jsx`
```jsx
import '@rakuten-rex/button/Button/css';
function MyCustomComponent() {
return (
);
}
```
#### Using Static CSS (Legacy Websites)
Example:
`my-component.jsx`
```jsx
import '@rakuten-rex/button/Button/css/static';
function MyCustomComponent() {
return (
);
}
```
[Click here](https://rakuten-rex.github.io/button/) to see all working examples in Storybook.
### Sass mixins
For your own customization of styles (React, Vue, Angular, etc.) or Static HTML.
Example:
`my-styles.scss`
```scss
@import '~@rakuten-rex/button/ButtonUi/sass/styles.mixin';
.my-button-with-rex-styles {
@include rex-button-ui();
}
```
### Vue.js
A basic implementation based on HTML structure and import CSS styles into your component.
Example:
`my-component.vue`
```vue
```
## B) Static HTML
Copy-paste the stylesheet `` into your `` tag to load our CSS styles.
### Using CSS Variables (Modern Websites and WebApps)
**Production mode URL** (recommended for Static HTML projects):
```
https://unpkg.com/@rakuten-rex/button@1.5.1/Button/Button.production.min.css
```
Development mode URL (for local testing):
```
https://unpkg.com/@rakuten-rex/button@1.5.1/Button/Button.development.css
```
### Using Static CSS (Legacy Websites)
```
https://unpkg.com/@rakuten-rex/button@1.5.1/Button/Button.static.css
```
### Single component integration
Add it from unpkg.com CDN (NPM) into your HTML template or HTML static page.
Example:
`my-page.html`
```html
My Page
```
## Documentation, source code and distribution
|| Site | URL |
|-------------| ------------- | ------------- |
|| Github (Source Code) | https://github.com/rakuten-rex |
|| NPM (Package distribution) | https://www.npmjs.com/org/rakuten-rex |
|| ZeroHeight (Documentation) | https://zeroheight.com/390c074f3 |
## Project Stack
| Front-end |
|-------------|
| HTML5 CSS3 & Sass JavaScript ES6 React |
| Tools |
|-------------|
| webpack Storybook Babel ESLint Prettier |
## Features
| Styles features | JavaScript features |
|-------------|-------------|
| Theme support via CSS variables | React components splitted by type |
| Static CSS styles available for HTML/VueJS/AngularJS | Universal Module Definition support |
| Sass mixins for custom builds |
| Reset CSS styles already bundled by HTML tags |
| Removed duplicated CSS props |
| CSS classes prefix `rex-` |
## Browser Support
| PC | Mobile
|-------------|-------------|
| Chrome 49+ | iOS 9+ (Safari 9.3+, Chrome 78+) |
| Safari 9.1+ | Android 6+ (Chrome 78+, Android Browser 76+) |
| Firefox 31+ | |
| MS Edge 15+ | |
| IE 11+ | |
```
npm install @rakuten-rex/button@1.5.1 --save
```
```
yarn add @rakuten-rex/button@1.5.1
```
# Getting started
## Storybook Live examples
For a complete guide of properties for React and HTML classes please visit our Storybook page:
[
](https://rakuten-rex.github.io/button/)
https://rakuten-rex.github.io/button/
**Storybook features**
- [x] Stories by component types
- [x] HTML raw output
- [x] JSX output
- [x] Stories source code
- [x] Knobs with multiple options
## ZeroHeight Documentation
For a complete Documentation including all ReX Design System Components, Live HTML/React examples and Demos please visit:
[
](https://rakuten-rex.github.io/)
https://rakuten-rex.github.io/
# How to integrate ReX in your project
## A) JavaScript modules
### 
React component (JavaScript + CSS Styles)
For plug and play components integration.
Example:
`my-component.jsx`
```jsx
import Button from '@rakuten-rex/button';
function MyCustomComponent() {
return (
);
}
```
[Click here](https://rakuten-rex.github.io/button/) to see all working examples in Storybook.
### 
CSS Styles only
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
#### Using CSS Variables (Modern Websites and WebApps)
Example:
`my-component.jsx`
```jsx
import '@rakuten-rex/button/Button/css';
function MyCustomComponent() {
return (
);
}
```
#### Using Static CSS (Legacy Websites)
Example:
`my-component.jsx`
```jsx
import '@rakuten-rex/button/Button/css/static';
function MyCustomComponent() {
return (
);
}
```
[Click here](https://rakuten-rex.github.io/button/) to see all working examples in Storybook.
### 
Sass mixins
For your own customization of styles (React, Vue, Angular, etc.) or Static HTML.
Example:
`my-styles.scss`
```scss
@import '~@rakuten-rex/button/ButtonUi/sass/styles.mixin';
.my-button-with-rex-styles {
@include rex-button-ui();
}
```
### 
Vue.js
A basic implementation based on HTML structure and import CSS styles into your component.
Example:
`my-component.vue`
```vue
```
## B) Static HTML
Copy-paste the stylesheet `` into your `` tag to load our CSS styles.
### Using CSS Variables (Modern Websites and WebApps)
**Production mode URL** (recommended for Static HTML projects):
```
https://unpkg.com/@rakuten-rex/button@1.5.1/Button/Button.production.min.css
```
Development mode URL (for local testing):
```
https://unpkg.com/@rakuten-rex/button@1.5.1/Button/Button.development.css
```
### Using Static CSS (Legacy Websites)
```
https://unpkg.com/@rakuten-rex/button@1.5.1/Button/Button.static.css
```
### 
Single component integration
Add it from unpkg.com CDN (NPM) into your HTML template or HTML static page.
Example:
`my-page.html`
```html
| Github (Source Code) | https://github.com/rakuten-rex |
|
JavaScript ES6 
webpack 
Storybook 
Babel 
ESLint 
Prettier |
## Features
| Styles features | JavaScript features |
|-------------|-------------|
| Theme support via CSS variables | React components splitted by type |
| Static CSS styles available for HTML/VueJS/AngularJS | Universal Module Definition support |
| Sass mixins for custom builds |
| Reset CSS styles already bundled by HTML tags |
| Removed duplicated CSS props |
| CSS classes prefix `rex-` |
## Browser Support
| PC | Mobile
|-------------|-------------|
| 
Chrome 49+ | 
iOS 9+ (Safari 9.3+, Chrome 78+) |
| 
Safari 9.1+ | 
Android 6+ (Chrome 78+, Android Browser 76+) |
| 
Firefox 31+ | |
| 
MS Edge 15+ | |
| 
IE 11+ | |