@_nu/react-button - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

CHANGELOG.md

+## 0.0.6 (2019-08-20)
+
+### Bug Fixes
+
+- 修改版本依赖 ([e4dae1b](https://github.com/nu-system/react-button/commit/e4dae1b))

es/index.js

@@ -5,83 +5,40 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames/bind';
+import React from "react";
+import PropTypes from "prop-types";
 
-var classNamesApi = classNames.bind({
-  fill: '_fill',
-  default: '_default',
-  primary: '_primary',
-  secondary: '_secondary',
-  warning: '_warning',
-  success: '_success',
-  danger: '_danger',
-  disabled: '_disabled',
-  loading: '_loading',
-  large: '_large',
-  middle: '_middle',
-  small: '_small',
-  capsule: '_capsule',
-  ghost: '_ghost',
-  link: '_link',
-  block: '_block'
-});
-
 var Button = function Button(_ref) {
-  var _classNames;
+  var _ref$className = _ref.className,
+      className = _ref$className === undefined ? "" : _ref$className,
+      _ref$classNameDefault = _ref.classNameDefault,
+      classNameDefault = _ref$classNameDefault === undefined ? "_fill" : _ref$classNameDefault,
+      _ref$children = _ref.children,
+      children = _ref$children === undefined ? null : _ref$children,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === undefined ? "button" : _ref$Component,
+      _ref$SubComponent = _ref.SubComponent,
+      SubComponent = _ref$SubComponent === undefined ? "span" : _ref$SubComponent,
+      _ref$href = _ref.href,
+      href = _ref$href === undefined ? null : _ref$href,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === undefined ? false : _ref$disabled,
+      otherProps = _objectWithoutProperties(_ref, ["className", "classNameDefault", "children", "Component", "SubComponent", "href", "disabled"]);
 
-  var baseClass = _ref.baseClass,
-      component = _ref.component,
-      color = _ref.color,
-      primary = _ref.primary,
-      secondary = _ref.secondary,
-      warning = _ref.warning,
-      success = _ref.success,
-      danger = _ref.danger,
-      variant = _ref.variant,
-      fill = _ref.fill,
-      ghost = _ref.ghost,
-      link = _ref.link,
-      large = _ref.large,
-      middle = _ref.middle,
-      small = _ref.small,
-      loading = _ref.loading,
-      capsule = _ref.capsule,
-      block = _ref.block,
-      otherProps = _objectWithoutProperties(_ref, ['baseClass', 'component', 'color', 'primary', 'secondary', 'warning', 'success', 'danger', 'variant', 'fill', 'ghost', 'link', 'large', 'middle', 'small', 'loading', 'capsule', 'block']);
-
-  // 填充正确的class
-  var className = otherProps.className,
-      children = otherProps.children,
-      newProps = _objectWithoutProperties(otherProps, ['className', 'children']);
-
-  var boolClass = classNamesApi({
-    primary: primary,
-    secondary: secondary,
-    warning: warning,
-    success: success,
-    danger: danger,
-    fill: fill,
-    ghost: ghost,
-    link: link,
-    large: large,
-    middle: middle,
-    small: small,
-    loading: loading,
-    capsule: capsule,
-    block: block,
-    disabled: otherProps.disabled
-  });
-
-  // 当一个主色都没有的时候
-  var newClass = classNames(baseClass, boolClass, className, (_classNames = {}, _classNames['_' + color] = !primary && !secondary && !warning && !success && !danger, _classNames['_' + variant] = !fill && !ghost && !link, _classNames));
-
-  var ComponentProp = newProps.href ? 'a' : component;
-  if (component === 'button' && !newProps.type) {
-    newProps.type = 'button';
-  }
+  var ComponentTag = !!href ? "a" : Component;
+  /**
+   * this can ignore the empty
+   * className can be string and array
+   */
+  var strClassName = ["nu_btn", classNameDefault, className].flat().filter(function (item) {
+    return !!item;
+  }).join(" ");
   return React.createElement(
-    ComponentProp,
-    _extends({ className: newClass }, newProps),
+    ComponentTag,
+    _extends({
+      href: href,
+      type: ComponentTag === "button" ? "button" : false,
+      disabled: disabled,
+      className: strClassName
+    }, otherProps),
     React.createElement(
-      'span',
+      SubComponent,
       null,
@@ -95,90 +52,31 @@ children
   /**
-   * 基础的 class 名称
+   * children of component
    */
-  baseClass: PropTypes.string,
+  children: PropTypes.node,
   /**
-   * 链接,有链接的时候是A标签，没有是Button标签
+   * just className
    */
-  href: PropTypes.string,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   /**
-   * 外壳组件 默认为 button
+   * just className base
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  classNameDefault: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   /**
-   * 颜色
+   * href for tag a
    */
-  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'warning', 'success', 'danger']),
+  href: PropTypes.string,
   /**
-   * 主按钮（蓝色）
+   * shell of button
    */
-  primary: PropTypes.bool,
+  Component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   /**
-   * 二级按钮（灰色）
+   * shell of button
    */
-  secondary: PropTypes.bool,
+  SubComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   /**
-   * 警告（黄色）
+   * status of disabled
    */
-  warning: PropTypes.bool,
-  /**
-   * 成功（绿色）
-   */
-  success: PropTypes.bool,
-  /**
-   * 错误（红色）
-   */
-  danger: PropTypes.bool,
-  /**
-   * 不可用状态
-   */
-  disabled: PropTypes.bool,
-  /**
-   * loading 状态
-   */
-  loading: PropTypes.bool,
-  /**
-   * 大号按钮
-   */
-  large: PropTypes.bool,
-  /**
-   * 中号按钮
-   */
-  middle: PropTypes.bool,
-  /**
-   * 小号按钮
-   */
-  small: PropTypes.bool,
-  /**
-   * 默认的变种
-   */
-  variant: PropTypes.oneOf(['ghost', 'link', 'fill']),
-  /**
-     * 实心按钮
-     */
-  fill: PropTypes.bool,
-  /**
-   * 幽灵按钮，只有边框没有背景的按钮
-   */
-  ghost: PropTypes.bool,
-  /**
-   * 链接按钮，只有文字样式的按钮
-   */
-  link: PropTypes.bool,
-  /**
-   * 胶囊按钮，左右都是圆角的按钮
-   */
-  capsule: PropTypes.bool,
-  /**
-   * 块状按钮，占一行的按钮
-   */
-  block: PropTypes.bool
+  disabled: PropTypes.bool
 } : {};
-
-Button.defaultProps = {
-  baseClass: 'nu_btn',
-  component: 'button',
-  color: 'default',
-  variant: 'fill'
-};
-
+Button.defaultProps = {};
 export default Button;

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,14 +7,10 @@ exports.__esModule = true;
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _bind = require('classnames/bind');
-
-var _bind2 = _interopRequireDefault(_bind);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,79 +20,37 @@
 
-var classNamesApi = _bind2.default.bind({
-  fill: '_fill',
-  default: '_default',
-  primary: '_primary',
-  secondary: '_secondary',
-  warning: '_warning',
-  success: '_success',
-  danger: '_danger',
-  disabled: '_disabled',
-  loading: '_loading',
-  large: '_large',
-  middle: '_middle',
-  small: '_small',
-  capsule: '_capsule',
-  ghost: '_ghost',
-  link: '_link',
-  block: '_block'
-});
-
 var Button = function Button(_ref) {
-  var _classNames;
+  var _ref$className = _ref.className,
+      className = _ref$className === undefined ? "" : _ref$className,
+      _ref$classNameDefault = _ref.classNameDefault,
+      classNameDefault = _ref$classNameDefault === undefined ? "_fill" : _ref$classNameDefault,
+      _ref$children = _ref.children,
+      children = _ref$children === undefined ? null : _ref$children,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === undefined ? "button" : _ref$Component,
+      _ref$SubComponent = _ref.SubComponent,
+      SubComponent = _ref$SubComponent === undefined ? "span" : _ref$SubComponent,
+      _ref$href = _ref.href,
+      href = _ref$href === undefined ? null : _ref$href,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === undefined ? false : _ref$disabled,
+      otherProps = _objectWithoutProperties(_ref, ["className", "classNameDefault", "children", "Component", "SubComponent", "href", "disabled"]);
 
-  var baseClass = _ref.baseClass,
-      component = _ref.component,
-      color = _ref.color,
-      primary = _ref.primary,
-      secondary = _ref.secondary,
-      warning = _ref.warning,
-      success = _ref.success,
-      danger = _ref.danger,
-      variant = _ref.variant,
-      fill = _ref.fill,
-      ghost = _ref.ghost,
-      link = _ref.link,
-      large = _ref.large,
-      middle = _ref.middle,
-      small = _ref.small,
-      loading = _ref.loading,
-      capsule = _ref.capsule,
-      block = _ref.block,
-      otherProps = _objectWithoutProperties(_ref, ['baseClass', 'component', 'color', 'primary', 'secondary', 'warning', 'success', 'danger', 'variant', 'fill', 'ghost', 'link', 'large', 'middle', 'small', 'loading', 'capsule', 'block']);
-
-  // 填充正确的class
-  var className = otherProps.className,
-      children = otherProps.children,
-      newProps = _objectWithoutProperties(otherProps, ['className', 'children']);
-
-  var boolClass = classNamesApi({
-    primary: primary,
-    secondary: secondary,
-    warning: warning,
-    success: success,
-    danger: danger,
-    fill: fill,
-    ghost: ghost,
-    link: link,
-    large: large,
-    middle: middle,
-    small: small,
-    loading: loading,
-    capsule: capsule,
-    block: block,
-    disabled: otherProps.disabled
-  });
-
-  // 当一个主色都没有的时候
-  var newClass = (0, _bind2.default)(baseClass, boolClass, className, (_classNames = {}, _classNames['_' + color] = !primary && !secondary && !warning && !success && !danger, _classNames['_' + variant] = !fill && !ghost && !link, _classNames));
-
-  var ComponentProp = newProps.href ? 'a' : component;
-  if (component === 'button' && !newProps.type) {
-    newProps.type = 'button';
-  }
+  var ComponentTag = !!href ? "a" : Component;
+  /**
+   * this can ignore the empty
+   * className can be string and array
+   */
+  var strClassName = ["nu_btn", classNameDefault, className].flat().filter(function (item) {
+    return !!item;
+  }).join(" ");
   return _react2.default.createElement(
-    ComponentProp,
-    _extends({ className: newClass }, newProps),
+    ComponentTag,
+    _extends({
+      href: href,
+      type: ComponentTag === "button" ? "button" : false,
+      disabled: disabled,
+      className: strClassName
+    }, otherProps),
     _react2.default.createElement(
-      'span',
+      SubComponent,
       null,
@@ -110,91 +64,32 @@ children
   /**
-   * 基础的 class 名称
+   * children of component
    */
-  baseClass: _propTypes2.default.string,
+  children: _propTypes2.default.node,
   /**
-   * 链接,有链接的时候是A标签，没有是Button标签
+   * just className
    */
-  href: _propTypes2.default.string,
+  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
   /**
-   * 外壳组件 默认为 button
+   * just className base
    */
-  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),
+  classNameDefault: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
   /**
-   * 颜色
+   * href for tag a
    */
-  color: _propTypes2.default.oneOf(['default', 'primary', 'secondary', 'warning', 'success', 'danger']),
+  href: _propTypes2.default.string,
   /**
-   * 主按钮（蓝色）
+   * shell of button
    */
-  primary: _propTypes2.default.bool,
+  Component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),
   /**
-   * 二级按钮（灰色）
+   * shell of button
    */
-  secondary: _propTypes2.default.bool,
+  SubComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),
   /**
-   * 警告（黄色）
+   * status of disabled
    */
-  warning: _propTypes2.default.bool,
-  /**
-   * 成功（绿色）
-   */
-  success: _propTypes2.default.bool,
-  /**
-   * 错误（红色）
-   */
-  danger: _propTypes2.default.bool,
-  /**
-   * 不可用状态
-   */
-  disabled: _propTypes2.default.bool,
-  /**
-   * loading 状态
-   */
-  loading: _propTypes2.default.bool,
-  /**
-   * 大号按钮
-   */
-  large: _propTypes2.default.bool,
-  /**
-   * 中号按钮
-   */
-  middle: _propTypes2.default.bool,
-  /**
-   * 小号按钮
-   */
-  small: _propTypes2.default.bool,
-  /**
-   * 默认的变种
-   */
-  variant: _propTypes2.default.oneOf(['ghost', 'link', 'fill']),
-  /**
-     * 实心按钮
-     */
-  fill: _propTypes2.default.bool,
-  /**
-   * 幽灵按钮，只有边框没有背景的按钮
-   */
-  ghost: _propTypes2.default.bool,
-  /**
-   * 链接按钮，只有文字样式的按钮
-   */
-  link: _propTypes2.default.bool,
-  /**
-   * 胶囊按钮，左右都是圆角的按钮
-   */
-  capsule: _propTypes2.default.bool,
-  /**
-   * 块状按钮，占一行的按钮
-   */
-  block: _propTypes2.default.bool
+  disabled: _propTypes2.default.bool
 } : {};
-
-Button.defaultProps = {
-  baseClass: 'nu_btn',
-  component: 'button',
-  color: 'default',
-  variant: 'fill'
-};
-
+Button.defaultProps = {};
 exports.default = Button;
-module.exports = exports['default'];
+module.exports = exports["default"];

package.json

 {
   "name": "@_nu/react-button",
-  "version": "0.0.6",
-  "description": "NU 「 no-ui 」 组件库系统 nu-system，按钮组件 React 实现",
+  "version": "0.0.7",
+  "description": "No UI dependency Button of react",
   "main": "lib/index.js",
@@ -25,2 +25,3 @@ "module": "es/index.js",
     "clean": "nwb clean-module && nwb clean-demo",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "prepublishOnly": "npm run build",
@@ -32,19 +33,19 @@ "start": "nwb serve-react-demo",
     "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "commitizenInit": "commitizen init cz-conventional-changelog --yarn --dev --exact"
+    "commitizenInit": "commitizen init cz-conventional-changelog --yarn --dev --exact",
+    "precommit": "npm run prettier"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "16.x",
-    "@_nu/css-button": "^0.0.3"
+    "@_nu/css-button": "^0.0.3",
+    "react": "16.x"
   },
   "devDependencies": {
     "@_nu/css-button": "^0.0.3",
-    "nwb": "0.23.x",
+    "conventional-changelog-cli": "^2.0.23",
+    "cz-conventional-changelog": "3.0.2",
+    "prettier": "1.19.1",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "conventional-changelog-cli": "^2.0.23",
-    "cz-conventional-changelog": "3.0.2"
+    "react-dom": "^16.8.6"
   },
@@ -59,3 +60,8 @@ "keywords": [
     "button"
-  ]
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
 }

README.md

 # Button
 
-[![npm package](https://img.shields.io/npm/v/@_nu/react-button.svg)](https://www.npmjs.org/package/@_nu/react-button)
-[![github](https://img.shields.io/github/stars/nu-system/react-button.svg?style=social)](https://github.com/nu-system/react-button)
+[![npm package][npm-badge]][npm-url]
+[![npm downloads][npm-downloads]][npm-url]
+[![github][git-badge]][git-url]
 
+[npm-badge]: https://img.shields.io/npm/v/@_nu/react-button.svg
+[npm-url]: https://www.npmjs.org/package/@_nu/react-button
+[npm-downloads]: https://img.shields.io/npm/dw/@_nu/react-button
+[git-url]: https://github.com/nu-system/react-button
+[git-badge]: https://img.shields.io/github/stars/nu-system/react-button.svg?style=social
+
+No UI dependency button of react.
+
 <iframe src="https://codesandbox.io/embed/throbbing-leftpad-juijc?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FButton.js" title="throbbing-leftpad-juijc" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
-组件库母版系统 [NU-system](https://nu-system.github.io/) 按钮组件 React 实现。
+English | [简体中文](https://nu-system.github.io/zh/react/button/)
 
-## 怎么用？
+## Install
 
@@ -16,29 +25,30 @@ ```
 
-### 二次封装
+- [@\_nu/react-button](https://nu-system.github.io/react/button/): Login only
+- [@\_nu/css-button](https://nu-system.github.io/css/button/): UI Just
 
+### Custom
+
 ```JSX
 /* @components/Button/index.js */
-import NuButton from "@_nu/react-button";
-import "@_nu/css-button";     // 样式组件
-import "@_nu/css-button/css/skins/bootstrap.css"; // bootstrap 皮肤 
-// import './style.css'; // 你自定义的css样式
-NuButton.defaultProps.color = "primary";  // 自定义默认颜色
-NuButton.defaultProps.variant = "ghost";  // 自定义默认变体
-export default NuButton;
+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
+
+Button.defaultProps.classNameBase = "_fill";  // base className of button
+
+export default Button;
 ```
 
-因为 `NuButton` 是纯逻辑组件本身不会输出任何样式，在实际项目中使用需要二次封装。
-这里采用的是 [nu-button](https://nu-system.github.io/css/button/) 里面的 bootstrap 皮肤。
+### Use
 
-### 使用
-
 ```JSX
 import Button from "./components/Button";
 
-const Page=()=>{    
+const Page=()=>{
     return (
      <div>
-        <Button ghost large>一个大的幽灵按钮</Button>                
-        <Button href="/nu-button" ghost large>一个大的幽灵主按钮</Button>
-     </div>     
+        <Button>Button</Button>
+        <Button href="/nu-button">Button</Button>
+     </div>
     );
@@ -50,82 +60,64 @@ };
 
-## DOM 结构
+## 结构
 
 ```JSX
+<Component>
+    <SubComponent>{children}</SubComponent>
+</Component>
+```
+
+## Api
+
+| Prop             |               type               | Default  |         Function          |
+| :--------------- | :------------------------------: | :------: | :-----------------------: |
+| children         |        string&#124;Array         |   null   |         children          |
+| className        |        string&#124;Array         |    ''    |         className         |
+| classNameDefault |        string&#124;Array,        | '\_fill' |     default className     |
+| href             |              string              |   null   |       href for `a`        |
+| disabled         |             boolean              |  false   | disabled status of button |
+| Component        | string &#124; func &#124; object | 'button' |          wrapper          |
+| SubComponent     | string &#124; func &#124; object |  'span'  |         container         |
+
+```JSX
 <Button>hello</Button>
+<Button disabled>hello</Button>
+<Button className="_primary">hello</Button>
+<Button SubComponent="strong">hello</Button>
 <Button href="." title="hello">hello</Button>
 ```
 
-上面的代码会被渲染成如下的 HTML 结构。
-
 ```HTML
-<button class="nu_button" type="button" ><span>hello</span></button>
-<a class="nu_button" href="." title="hello"><span>hello</span></a>
+<button class="nu_btn _fill" type="button"><span>hello</span></button>
+<button class="nu_btn _fill" type="button" disabled><span>hello</span></button>
+<button class="nu_btn _fill _primary" type="button"><span>hello</span></button>
+<button class="nu_btn _fill" type="button"><strong>hello</strong></button>
+<a class="nu_btn _fill" href="." title="hello"><span>hello</span></a>
 ```
 
-## Api
+## Use with Link？
 
-| props   | 类型 | 默认值 | 功能 |
-|:-----|:-----:|:-----:|:-----:|
-| baseClass |  string | 'nu_btn' | 按钮默认选择器 |
-| href |  string | - | 跳转链接 |
-| type |  string | 'button' | 按钮类型 |
-| component | string &#124; func &#124; object | 'button' | 外壳组件 |
-| disabled |  boolean | - | 不可用按钮 |
-| loading |  boolean | - | loading按钮 |
-| capsule |  boolean | - | 圆角按钮|
-| circle |  boolean | - | 正圆按钮|
-| block |  boolean | - | 占一行的按钮|
-| color | 'default' &#124; 'primary' &#124; 'secondary' <br/> 'warning' &#124; 'success' &#124; 'danger' |  'default' | 按钮颜色 |
-| primary |  boolean | - | 主按钮 | 
-| secondary |  boolean | - | 次级按钮 | 
-| warning |  boolean | - | 警告按钮 | 
-| success |  boolean | - | 成功按钮 |
-| danger |  boolean | - | 危险按钮 | 
-| variant| 'fill' &#124; 'ghost' &#124; 'link' | 'fill' | 按钮变体 |
-| fill | boolean | - | 实心按钮 | 
-| ghost |  boolean | - | 幽灵按钮 | 
-| link |  boolean | - | 链接按钮 |
-| large |  boolean | - | 大按钮 | 
-| middle |  boolean | - | 中号按钮 |
-| small |  boolean | - | 小按钮 |
-
-并且除了上表中的属性，其它属性都会直接传到原生 button 上。
-
-## 如何配合路由组件使用
-
 ```jsx
 import { Link } from "@reach/router";
-import NuButton from "@_nu/react-button";
+import Button from "@_nu/react-button";
 import "@_nu/css-button";
-import './style.css';
+import "./style.css";
 
-// 自定义标签
-NuButton.defaultProps.component = Link;
+// Custom
+Button.defaultProps.component = Link;
 
-export default NuButton;
+export default Button;
 ```
 
-## 如何修改样式？
+## Custom default className?
 
-nu-button-react 会将上所有的 `boolean` 属性，基于以下的 「 class 映射表 」添加对应的 class 到按钮上。
+```JSX
+Button.defaultProps.classNameDefault = "_fill _capsule";
 
-想要自定义样式，只需要围绕对应选择器进行开发即可, 样式定义规则可以查看 [nu-button](https://nu-system.github.io/css/button/)。
+// or
 
-| props |  class |
-|:----------|------:|
-| baseClass | .nu_btn |
-| primary | ._primary |
-| secondary | ._secondary |
-| warning | ._warning |
-| success | ._success |
-| danger | ._danger |
-| fill | ._fill |
-| ghost | ._ghost |
-| link | ._link |
-| disabled | ._disabled |
-| loading | ._loading |
-| large | ._large |
-| middle | ._middle |
-| small | ._small |
-| capsule | ._capsule |
-| block | ._block |
+Button.defaultProps.classNameDefault = ["_fill", "_capsule"];
+```
+
+## Custom style？
+
+Go to [@\_nu/css-button](https://nu-system.github.io/css/button/)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

-25%

Number of package files

5

25%

Worsened metrics

Total package byte prevSize

11757

-25.2%

Lines of code

154

-55.36%

Number of lines in readme file

122

-6.15%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  classnames@^2.2.6

• - Removed

  classnames@2.5.1
  (transitive)