@_nu/react-button

Button

No UI dependency button of react.

English | 简体中文

Features

• When got href tagName will replace by a;
• When tagName is button will got type="button" as default;
• When children is <string> and title will be children as default;
• When tagName is not button will got role="button"

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 "@_nu/css-button";                         // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css';                             // custome style
export default from "@_nu/react-button";

/* @components/Button/index.d.ts */
import { ComponentProps } from "@_nu/react-button";
declare const _default: (props?: ComponentProps) => JSX.Element;
export default _default;

Use

<Button className="nu_btn _fill _primay">Button</Button>
<Button className="nu_btn _fill _primay" href="/nu-button">Link Button</Button>
<Button component="strong" className="nu_btn _fill _primay">Button</Button>

Api

Prop	type	Default	Function
href	string	' '	href for a
component	string | func | object	'button'	tagName

<Button className="nu_btn _fill">hello</Button>
<Button className="nu_btn _fill" component="strong">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>
<strong class="nu_btn _fill" role="button" title="hello">hello</strong>
<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" role="button" 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