Button
No UI dependency button of react.
Install
yarn add @_nu/react-button @_nu/css-button
- @_nu/react-button: Login only
- @_nu/css-button: UI Just
Custom
/* @components/Button/index.js */
import Button from "@_nu/react-button";
import "@_nu/css-button"; // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css'; // custome style
export default Button;
Use
import React, { useState } from 'react';
import Button, { ButtonClassProvider } from '../Button';
const Page=()=>{
const [buttonThemeClass, setButtonThemeClass] = useState('theme_class1');
const onThemeChange = e => {
setButtonThemeClass(e.currentTarget.value);
};
return (
<ButtonClassProvider value={buttonThemeClass}>
<div>
<select onChange={onThemeChange}>
<option value="theme_class1">theme1</option>
<option value="theme_class2">theme2</option>
</select>
<Button className="nu_btn">Button</Button>
<Button className="nu_btn" href="/nu-button">Button</Button>
</div>
</ButtonClassProvider>
);
};
export default Page;
Api
| Prop | type | Default | Function |
|---|---|---|---|
| children | string | Array | 'Â ' | children |
| className | string | Array | 'Â ' | className |
| href | string | 'Â ' | href for a |
| disabled | boolean | false | disabled status of button |
| Component | string | func | object | 'button' | wrapper |
<Button className="nu_btn _fill">hello</Button>
<Button className="nu_btn _fill"><strong>hello</strong></Button>
<Button className="nu_btn _fill" disabled>hello</Button>
<Button className="nu_btn _fill _primary">hello</Button>
<Button className="nu_btn _fill _primary" href="." title="hello">hello</Button>
=>
<button class="nu_btn _fill" type="button" title="hello">hello</button>
<button class="nu_btn _fill" type="button"><strong>hello</strong></button>
<button class="nu_btn _fill" type="button" disabled title="hello">hello</button>
<button class="nu_btn _primary _fill" type="button" title="hello">hello</button>
<button class="nu_btn _fill _primary" type="button" title="hello">hello</button>
<a class="nu_btn _fill _primary" href="." title="hello">hello</a>
Custom style？
Go to @_nu/css-button
test
// How to start
npm test
// generate coverage report
npm run test:coverage