@rakuten-rex/button
Advanced tools
This project is part of ReX Design Language and it can be used to create React UI Components.
For more information visit:
Github
https://github.com/rakuten-rex
NPM
https://www.npmjs.com/org/rakuten-rex
How it was built:
npm install @rakuten-rex/button@0.0.3 --save
For a complete guide of properties for React and HTML classes please visit the Storybook site:
https://rakuten-rex.github.io/button/
For projects with full ReX implementation.
import RexComponent from '@rakuten-rex/button';
For integration projects.
import RexComponent from '@rakuten-rex/button/without-fonts.js';
For integration projects using Static HTML or if you use a build tools without duplicated CSS classes removal.
Note: Requires global import of ReX Core.
import RexComponent from '@rakuten-rex/button/without-core.js';
For plug and play components integration.
Example:
import RexComponent from '@rakuten-rex/button';
function MyComponent() {
return <RexComponent>Hello World</RexComponent>;
}
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
Example:
import '@rakuten-rex/button/css';
function MyComponent() {
return <h1 className="rex-core-h1 rex-h1">Hello World</h1>;
}
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
You can choose between development (dev comments and unminified) or production (without dev comments and minified) mode.
We recommend to use production mode if your build process doesn't support to switch between both.
Development mode URL:
https://r.r10s.jp/com/rex/button/0.0.3/button.development.css
Production mode URL:
https://r.r10s.jp/com/rex/button/0.0.3/button.production.min.css
Add it from our CDN into your HTML template or HTML static page.
<!-- ReX button -->
<link href="https://r.r10s.jp/com/rex/button/0.0.3/button.production.min.css" rel="stylesheet">
Note: use button-without-core.min.css version to avoid duplicated code from ReX Core.
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/core/2.3.1/full-version.production.min.css" rel="stylesheet">
<!-- ReX button -->
<link href="https://r.r10s.jp/com/rex/button/0.0.3/button-without-core.production.min.css" rel="stylesheet">
Example:
<div class="rex-button">
<h1 class="rex-core-h1 rex-h1">Welcome to React</h1>
</div>
FAQs
Button with variations (Rounded, Pill, Outlined and Transparent)
The npm package @rakuten-rex/button receives a total of 4 weekly downloads. As such, @rakuten-rex/button popularity was classified as not popular.
We found that @rakuten-rex/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.