Button

npm package npm downloads github

No UI dependency button of react.

Install

yarn add @_nu/react-button @_nu/css-button

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
Last Updated: 5/16/2020, 3:33:45 PM