@uiw/react-button - npm Package Compare versions

Comparing version 4.21.23 to 5.0.0-bate.2.0

cjs/index.d.ts

 import React from 'react';
-import { IconProps } from '@uiw/react-icon';
 import { IProps, HTMLButtonProps } from '@uiw/utils';
-import './style/index.less';
+export * from './style';
 export declare type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'link';
@@ -13,4 +12,14 @@ export declare type ButtonSize = 'large' | 'default' | 'small';
     block?: boolean;
-    icon?: IconProps['type'];
+    icon?: React.ReactNode;
+    focus?: boolean;
+    /**
+     * 按钮类型
+     * @mytag {@link link }
+     * @beta
+     */
     type?: ButtonType;
+    /**
+     * 按钮尺寸
+     * @defaultValue 'large' | 'default' | 'small'
+     */
     size?: ButtonSize;
@@ -20,3 +29,5 @@ htmlType?: 'button' | 'submit' | 'reset';
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+/**@internal */
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -7,2 +7,3 @@ "use strict";
 });
+var _exportNames = {};
 exports["default"] = void 0;
@@ -12,6 +13,19 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIcon = _interopRequireDefault(require("@uiw/react-icon"));
+var _style = require("./style");
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
+var _reactIcon = require("@uiw/react-icon");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["prefixCls", "disabled", "active", "loading", "block", "basic", "htmlType", "type", "size", "icon", "className", "children"];
-var _default = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+/**@internal */
+var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var _props$prefixCls = props.prefixCls,
@@ -40,3 +54,4 @@ prefixCls = _props$prefixCls === void 0 ? 'w-btn' : _props$prefixCls,
   var cls = [className, prefixCls, size ? "".concat(prefixCls, "-size-").concat(size) : null, type ? "".concat(prefixCls, "-").concat(type) : null, basic ? "".concat(prefixCls, "-basic") : null, loading ? "".concat(prefixCls, "-loading") : null, disabled || loading ? 'disabled' : null, active ? 'active' : null, block ? 'block' : null].filter(Boolean).join(' ').trim();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ButtonStyleWarp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+    as: type === 'light' ? _style.ButtonStyleBaseLight : 'button',
     ref: ref,
@@ -46,5 +61,15 @@ type: htmlType,
     className: cls,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
-      type: icon
-    }), children && _react["default"].Children.map(children, function (child) {
+    param: {
+      focus: !!props.focus,
+      type: type,
+      size: size,
+      basic: basic,
+      loading: loading,
+      disabled: disabled || loading,
+      active: active,
+      block: block
+    },
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon.IconStyleBase, {
+      children: icon
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {}), children && _react["default"].Children.map(children, function (child) {
       if (!child) return child;
@@ -58,4 +83,4 @@ if ( /*#__PURE__*/_react["default"].isValidElement(child)) return child;
 });
+var _default = Button;
 exports["default"] = _default;
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

esm/index.d.ts

 import React from 'react';
-import { IconProps } from '@uiw/react-icon';
 import { IProps, HTMLButtonProps } from '@uiw/utils';
-import './style/index.less';
+export * from './style';
 export declare type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'link';
@@ -13,4 +12,14 @@ export declare type ButtonSize = 'large' | 'default' | 'small';
     block?: boolean;
-    icon?: IconProps['type'];
+    icon?: React.ReactNode;
+    focus?: boolean;
+    /**
+     * 按钮类型
+     * @mytag {@link link }
+     * @beta
+     */
     type?: ButtonType;
+    /**
+     * 按钮尺寸
+     * @defaultValue 'large' | 'default' | 'small'
+     */
     size?: ButtonSize;
@@ -20,3 +29,5 @@ htmlType?: 'button' | 'submit' | 'reset';
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+/**@internal */
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@uiw/react-icon';
-import "./style/index.css";
+import { ButtonStyleWarp, ButtonStyleBaseLight } from './style';
+import { IconStyleBase } from '@uiw/react-icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default /*#__PURE__*/React.forwardRef((props, ref) => {
+export * from './style';
+/**@internal */
+var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   var {
@@ -27,3 +29,4 @@ prefixCls = 'w-btn',
   var cls = [className, prefixCls, size ? prefixCls + "-size-" + size : null, type ? prefixCls + "-" + type : null, basic ? prefixCls + "-basic" : null, loading ? prefixCls + "-loading" : null, disabled || loading ? 'disabled' : null, active ? 'active' : null, block ? 'block' : null].filter(Boolean).join(' ').trim();
-  return /*#__PURE__*/_jsxs("button", _extends({}, others, {
+  return /*#__PURE__*/_jsxs(ButtonStyleWarp, _extends({}, others, {
+    as: type === 'light' ? ButtonStyleBaseLight : 'button',
     ref: ref,
@@ -33,5 +36,15 @@ type: htmlType,
     className: cls,
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
-      type: icon
-    }), children && React.Children.map(children, child => {
+    param: {
+      focus: !!props.focus,
+      type,
+      size,
+      basic,
+      loading,
+      disabled: disabled || loading,
+      active,
+      block
+    },
+    children: [icon ? /*#__PURE__*/_jsx(IconStyleBase, {
+      children: icon
+    }) : /*#__PURE__*/_jsx(React.Fragment, {}), children && React.Children.map(children, child => {
       if (!child) return child;
@@ -45,2 +58,3 @@ if ( /*#__PURE__*/React.isValidElement(child)) return child;
 });
+export default Button;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/react-button",
-  "version": "4.21.23",
+  "version": "5.0.0-bate.2.0",
   "description": "Button component",
@@ -13,2 +13,3 @@ "author": "Kenny Wong <[e-mail]>",
   "main": "cjs/index.js",
+  "typings": "cjs/index.d.ts",
   "module": "esm/index.js",
@@ -45,8 +46,9 @@ "files": [
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "styled-components": ">=5.3.5"
   },
   "dependencies": {
-    "@uiw/react-icon": "^4.21.23",
-    "@uiw/utils": "^4.21.23"
+    "@uiw/react-icon": "^5.0.0-bate.2.0",
+    "@uiw/utils": "^5.0.0-bate.2.0"
   }
 }

README.md

@@ -0,1 +1,3 @@
+[ButtonProps](./api_doc/markdown/react-button.buttonprops.md)
+
 Button 按钮
@@ -19,9 +21,41 @@ ===
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button, Divider, Icon } from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
+const Demo = ()=>(
+  <div>
+    <Button type="primary" >主要按钮</Button>
+    <Button type="success">成功按钮</Button>
+    <Button type="warning">警告按钮</Button>
+    <Button type="danger">错误按钮</Button>
+    <Button type="light">亮按钮</Button>
+    <Button type="dark">暗按钮</Button>
+    <Divider />
+    <Button basic type="primary">主要按钮</Button>
+    <Button basic type="success">成功按钮</Button>
+    <Button basic type="warning">警告按钮</Button>
+    <Button basic type="danger">错误按钮</Button>
+    <Button basic type="light">亮按钮</Button>
+    <Button basic type="dark">暗按钮</Button>
+    <Divider />
+    <Button>Normal</Button>
+    <Button disabled>Disabled</Button>
+    <Button type="primary" active>Button</Button>
+    <Button type="primary" size="small">more <Icon type="down" /></Button>
+    <Button type="link"> (超连接样式)link </Button>
+  </div>
+);
+export default Demo
+```
+
+### 按钮组
+
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true 
+import React from "react"
+import { Button, Divider, ButtonGroup,Icon } from 'uiw';
+
+const Demo = ()=>(
+  <div>
+    <ButtonGroup>
       <Button type="primary">主要按钮</Button>
@@ -33,91 +67,57 @@ <Button type="success">成功按钮</Button>
       <Button type="dark">暗按钮</Button>
-      <Divider />
-      <Button basic type="primary">主要按钮</Button>
-      <Button basic type="success">成功按钮</Button>
-      <Button basic type="warning">警告按钮</Button>
-      <Button basic type="danger">错误按钮</Button>
-      <Button basic type="light">亮按钮</Button>
-      <Button basic type="dark">暗按钮</Button>
-      <Divider />
-      <Button>Normal</Button>
-      <Button disabled>Disabled</Button>
-      <Button type="primary" active>Button</Button>
-      <Button type="primary" size="small">more <Icon type="down" /></Button>
-      <Button type="link"> (超连接样式)link </Button>
-    </div>
-  );
-}
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button size="small" type="primary">按钮</Button>
+      <Button size="small" type="primary">按钮</Button>
+      <Button size="small" type="primary">按钮</Button>
+      <Button size="small" type="primary">按钮</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button type="light">按钮</Button>
+      <Button type="light">按钮</Button>
+      <Button type="light">按钮</Button>
+      <Button type="light">按钮</Button>
+    </ButtonGroup>
+    <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
+    <ButtonGroup>
+      <Button icon={<Icon type="copy" />} type="primary">复制</Button>
+      <Button icon={<Icon type="delete" />} type="success">删除</Button>
+      <Button icon={<Icon type="file-add" />} type="warning">添加文件</Button>
+      <Button icon={<Icon type="map" />} type="danger">地图</Button>
+      <Button icon={<Icon type="linux" />} type="light">Linux</Button>
+      <Button icon={<Icon type="apple" />} type="dark">Apple</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button icon={<Icon type="copy" />} type="primary">复制</Button>
+      <Button icon={<Icon type="delete" />} type="primary">删除</Button>
+      <Button icon={<Icon type="file-add" />} type="primary">添加文件</Button>
+      <Button icon={<Icon type="map" />} type="primary">地图</Button>
+      <Button icon={<Icon type="linux" />} type="primary">Linux</Button>
+      <Button icon={<Icon type="apple" />} type="primary">Apple</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button icon={<Icon type="copy" />}>复制</Button>
+      <Button icon={<Icon type="delete" />} >删除</Button>
+      <Button icon={<Icon type="file-add" />} >添加文件</Button>
+      <Button icon={<Icon type="map" />} >地图</Button>
+      <Button icon={<Icon type="linux" />}>Linux</Button>
+      <Button icon={<Icon type="apple" />} >Apple</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button icon={<Icon type="copy" />} />
+      <Button icon={<Icon type="delete" />}  />
+      <Button icon={<Icon type="file-add" />}  />
+      <Button icon={<Icon type="map" />}  />
+      <Button icon={<Icon type="linux" />} />
+      <Button icon={<Icon type="apple" />} />
+    </ButtonGroup>
+  </div>
+);
+export default Demo
 ```
 
-### 按钮组
-
-```jsx mdx:preview
-import React from 'react';
-import { Button, Divider, ButtonGroup } from 'uiw';
-
-export default function Demo() {
-  return(
-    <div>
-      <ButtonGroup>
-        <Button type="primary">主要按钮</Button>
-        <Button type="success">成功按钮</Button>
-        <Button type="warning">警告按钮</Button>
-        <Button type="danger">错误按钮</Button>
-        <Button type="light">亮按钮</Button>
-        <Button type="dark">暗按钮</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button size="small" type="primary">按钮</Button>
-        <Button size="small" type="primary">按钮</Button>
-        <Button size="small" type="primary">按钮</Button>
-        <Button size="small" type="primary">按钮</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button type="light">按钮</Button>
-        <Button type="light">按钮</Button>
-        <Button type="light">按钮</Button>
-        <Button type="light">按钮</Button>
-      </ButtonGroup>
-      <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
-      <ButtonGroup>
-        <Button icon="copy" type="primary">复制</Button>
-        <Button icon="delete" type="success">删除</Button>
-        <Button icon="file-add" type="warning">添加文件</Button>
-        <Button icon="map" type="danger">地图</Button>
-        <Button icon="linux" type="light">Linux</Button>
-        <Button icon="apple" type="dark">Apple</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button icon="copy" type="primary">复制</Button>
-        <Button icon="delete" type="primary">删除</Button>
-        <Button icon="file-add" type="primary">添加文件</Button>
-        <Button icon="map" type="primary">地图</Button>
-        <Button icon="linux" type="primary">Linux</Button>
-        <Button icon="apple" type="primary">Apple</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button icon="copy">复制</Button>
-        <Button icon="delete">删除</Button>
-        <Button icon="file-add">添加文件</Button>
-        <Button icon="map">地图</Button>
-        <Button icon="linux">Linux</Button>
-        <Button icon="apple">Apple</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button icon="copy" />
-        <Button icon="delete" />
-        <Button icon="file-add" />
-        <Button icon="map" />
-        <Button icon="linux" />
-        <Button icon="apple" />
-      </ButtonGroup>
-    </div>
-  );
-}
-```
-
 ### 图标按钮
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button, Icon, Divider } from 'uiw';
@@ -130,24 +130,24 @@
 
-export default function Demo() {
-  return(
-    <div>
-      <Button icon="weibo" type="primary">主要按钮</Button>
-      <Button icon="chrome" type="success">成功按钮</Button>
-      <Button icon="taobao" type="warning">警告按钮</Button>
-      <Button icon="weibo" type="danger" />
-      <Button type="danger">
-        <Icon type="reload" spin={true} />
-        <span>错误<span>按钮</span></span>
-        <Icon type="weibo" />
-      </Button>
-      <Button icon="chrome" type="light">亮按钮</Button>
-      <Button icon="apple" type="dark">暗按钮</Button>
-      <Button icon={chat} type="dark">暗按钮</Button>
-      <Divider style={{ maxWidth: 220 }}>GitHub</Divider>
-      <Button icon={open} type="success">Open</Button>
-      <Button icon={merged} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button>
-      <Button icon={closed} type="danger">Closed</Button>
-    </div>
-  );
-}
+const Demo = ()=>(
+  <div>
+    <Button icon={<Icon type="weibo" />} type="primary">主要按钮</Button>
+    <Button icon={<Icon type="chrome" />} type="success">成功按钮</Button>
+    <Button icon={<Icon type="taobao" />} type="warning">警告按钮</Button>
+    <Button icon={<Icon type="weibo" />} type="danger" />
+    <Button type="danger">
+      <Icon type="reload" spin={true} />
+      <span>错误<span>按钮</span></span>
+      <Icon type="weibo" />
+    </Button>
+    <Button icon={<Icon type="chrome" />}  type="light">亮按钮</Button>
+    <Button icon={<Icon type="apple" />} type="dark">暗按钮</Button>
+    <Button icon={<Icon type={chat} />} type="dark">暗按钮</Button>
+    <Divider style={{ maxWidth: 220 }}>GitHub</Divider>
+    <Button icon={<Icon type={open} />}  type="success">Open</Button>
+    <Button icon={<Icon type={merged} />} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button>
+    <Button icon={<Icon type={closed} />} type="danger">Closed</Button>
+  </div>
+);
+export default Demo
+
 ```
@@ -157,28 +157,28 @@
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button, Icon, Divider } from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
-      <Button type="danger">
-        <Icon type="reload" spin={true} />
-        <span>错误<span>按钮</span></span>
-        <Icon type="weibo" />
-      </Button>
-      <Button loading type="primary">主要按钮</Button>
-      <Button loading type="success">成功按钮</Button>
-      <Button loading type="warning">警告按钮</Button>
-      <Button loading type="danger">错误按钮</Button>
-      <Button loading type="light">亮按钮</Button>
-      <Button loading type="dark">暗按钮</Button>
-      <Button loading type="danger">亮按钮</Button>
-      <Divider style={{ maxWidth: 220 }}>Size</Divider>
-      <Button loading size="small" type="primary">主要按钮</Button>
-      <Button loading size="default" type="success">成功按钮</Button>
-      <Button loading size="large" type="warning">警告按钮</Button>
-    </div>
-  );
-}
+const Demo = ()=>(
+  <div>
+    <Button type="danger">
+      <Icon type="reload" spin={true} />
+      <span>错误<span>按钮</span></span>
+      <Icon type="weibo" />
+    </Button>
+    <Button loading type="primary">主要按钮</Button>
+    <Button loading type="success">成功按钮</Button>
+    <Button loading type="warning">警告按钮</Button>
+    <Button loading type="danger">错误按钮</Button>
+    <Button loading type="light">亮按钮</Button>
+    <Button loading type="dark">暗按钮</Button>
+    <Button loading type="danger">亮按钮</Button>
+    <Divider style={{ maxWidth: 220 }}>Size</Divider>
+    <Button loading size="small" type="primary">主要按钮</Button>
+    <Button loading size="default" type="success">成功按钮</Button>
+    <Button loading size="large" type="warning">警告按钮</Button>
+  </div>
+);
+export default Demo
+
 ```
@@ -188,64 +188,66 @@
 
-```jsx mdx:preview
-import React from 'react';
-import { Button, ButtonGroup, Divider } from 'uiw';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
+import { Button, ButtonGroup, Divider ,Icon} from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
-      <ButtonGroup>
-        <Button disabled type="primary">主要按钮</Button>
-        <Button disabled type="success">成功按钮</Button>
-        <Button disabled type="warning">警告按钮</Button>
-        <Button disabled type="danger">错误按钮</Button>
-        <Button disabled type="light">亮按钮</Button>
-        <Button disabled type="dark">暗按钮</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button disabled type="primary">按钮</Button>
-        <Button disabled type="primary">按钮</Button>
-        <Button disabled type="primary">按钮</Button>
-        <Button disabled type="primary">按钮</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button disabled type="light">按钮</Button>
-        <Button disabled type="light">按钮</Button>
-        <Button type="light">按钮</Button>
-        <Button disabled type="light">按钮</Button>
-      </ButtonGroup>
-      <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
-      <ButtonGroup>
-        <Button disabled icon="copy" type="primary">复制</Button>
-        <Button disabled icon="delete" type="success">删除</Button>
-        <Button disabled icon="file-add" type="warning">添加文件</Button>
-        <Button disabled icon="map" type="danger">地图</Button>
-        <Button disabled icon="linux" type="light">Linux</Button>
-        <Button disabled icon="apple" type="dark">Apple</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button disabled icon="copy" type="primary">复制</Button>
-        <Button disabled icon="delete" type="primary">删除</Button>
-        <Button icon="file-add" type="primary">添加文件</Button>
-        <Button disabled icon="map" type="primary">地图</Button>
-        <Button disabled icon="linux" type="primary">Linux</Button>
-        <Button disabled icon="apple" type="primary">Apple</Button>
-      </ButtonGroup>
-      <ButtonGroup style={{ marginTop: 5 }}>
-        <Button disabled icon="copy">复制</Button>
-        <Button disabled icon="delete">删除</Button>
-        <Button disabled icon="file-add">添加文件</Button>
-        <Button disabled icon="map">地图</Button>
-        <Button disabled icon="linux">Linux</Button>
-        <Button disabled icon="apple">Apple</Button>
-      </ButtonGroup>
-      <div style={{ marginTop: 5 }}>
-        <Button disabled icon="weibo" basic type="primary" />
-        <Button disabled icon="chrome" basic type="success" />
-        <Button disabled icon="taobao" basic type="warning" />
-        <Button disabled icon="apple" basic type="danger" />
-        <Button disabled icon="weibo" basic type="dark" />
-      </div>
+const Demo = ()=>(
+  <div>
+    <ButtonGroup>
+      <Button disabled type="primary">主要按钮</Button>
+      <Button disabled type="success">成功按钮</Button>
+      <Button disabled type="warning">警告按钮</Button>
+      <Button disabled type="danger">错误按钮</Button>
+      <Button disabled type="light">亮按钮</Button>
+      <Button disabled type="dark">暗按钮</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button disabled type="primary">按钮</Button>
+      <Button disabled type="primary">按钮</Button>
+      <Button disabled type="primary">按钮</Button>
+      <Button disabled type="primary">按钮</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button disabled type="light">按钮</Button>
+      <Button disabled type="light">按钮</Button>
+      <Button disabled type="light">按钮</Button>
+      <Button disabled type="light">按钮</Button>
+    </ButtonGroup>
+    <Divider style={{ maxWidth: 220 }}>添加图标</Divider>
+    <ButtonGroup>
+      <Button disabled icon={<Icon type="copy" />}  type="primary">复制</Button>
+      <Button disabled icon={<Icon type="delete" />}   type="success">删除</Button>
+      <Button disabled icon={<Icon type="file-add" />}  type="warning">添加文件</Button>
+      <Button disabled icon={<Icon type="map" />}  type="danger">地图</Button>
+      <Button disabled icon={<Icon type="linux" />} type="light">Linux</Button>
+      <Button disabled  icon={<Icon type="apple" />} type="dark">Apple</Button>
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button disabled icon={<Icon type="copy" />}  type="primary">复制</Button>
+      <Button disabled icon={<Icon type="delete" />}   type="primary">删除</Button>
+      <Button disabled icon={<Icon type="file-add" />}  type="primary">添加文件</Button>
+      <Button disabled icon={<Icon type="map" />}  type="primary">地图</Button>
+      <Button disabled icon={<Icon type="linux" />} type="primary">Linux</Button>
+      <Button disabled icon={<Icon type="apple" />} type="primary">Apple</Button>
+
+
+    </ButtonGroup>
+    <ButtonGroup style={{ marginTop: 5 }}>
+      <Button disabled icon={<Icon type="copy" />} >复制</Button>
+      <Button disabled icon={<Icon type="delete" />} >删除</Button>
+      <Button disabled icon={<Icon type="file-add" />}>添加文件</Button>
+      <Button disabled icon={<Icon type="map" />} >地图</Button>
+      <Button disabled icon={<Icon type="linux" />} >Linux</Button>
+      <Button disabled icon={<Icon type="apple" />}>Apple</Button>
+    </ButtonGroup>
+    <div style={{ marginTop: 5 }}>
+      <Button icon={<Icon type="weibo" />} disabled basic type="primary" />
+      <Button icon={<Icon type="chrome" />} disabled basic type="success" />
+      <Button icon={<Icon type="taobao" />} disabled basic type="warning" />
+      <Button icon={<Icon type="apple" />} disabled basic type="danger" />
+      <Button icon={<Icon type="weibo" />} disabled basic type="dark" />
     </div>
-  );
-}
+  </div>
+);
+export default Demo
+
 ```
@@ -255,46 +257,46 @@
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button, ButtonGroup, Row, Col } from 'uiw';
 
-export default function Demo() {
-  return(
-    <Row gutter={10}>
-      <Col style={{ maxWidth: 120 }}>
-        <ButtonGroup vertical>
-          <Button type="primary">按钮</Button>
-          <Button type="primary">按钮</Button>
-          <Button type="primary">按钮</Button>
-          <Button type="primary">按钮</Button>
-        </ButtonGroup>
-      </Col>
-      <Col style={{ maxWidth: 120 }}>
-        <ButtonGroup vertical>
-          <Button type="success">按钮</Button>
-          <Button disabled type="success">按钮</Button>
-          <Button type="success">按钮</Button>
-          <Button type="success">按钮</Button>
-        </ButtonGroup>
-      </Col>
-      <Col style={{ maxWidth: 120 }}>
-        <ButtonGroup vertical>
-          <Button type="light">按钮</Button>
-          <Button type="light">按钮</Button>
-          <Button type="light">按钮</Button>
-          <Button type="light">按钮</Button>
-        </ButtonGroup>
-      </Col>
-      <Col style={{ maxWidth: 120 }}>
-        <ButtonGroup vertical>
-          <Button type="primary">主要按钮</Button>
-          <Button type="success">成功按钮</Button>
-          <Button type="warning">警告按钮</Button>
-          <Button type="danger">错误按钮</Button>
-          <Button type="light">亮按钮</Button>
-          <Button type="dark">暗按钮</Button>
-        </ButtonGroup>
-      </Col>
-    </Row>
-  );
-}
+const Demo = ()=>(
+  <Row gutter={10}>
+    <Col style={{ maxWidth: 120 }}>
+      <ButtonGroup vertical>
+        <Button type="primary">按钮</Button>
+        <Button type="primary">按钮</Button>
+        <Button type="primary">按钮</Button>
+        <Button type="primary">按钮</Button>
+      </ButtonGroup>
+    </Col>
+    <Col style={{ maxWidth: 120 }}>
+      <ButtonGroup vertical>
+        <Button type="success">按钮</Button>
+        <Button disabled type="success">按钮</Button>
+        <Button type="success">按钮</Button>
+        <Button type="success">按钮</Button>
+      </ButtonGroup>
+    </Col>
+    <Col style={{ maxWidth: 120 }}>
+      <ButtonGroup vertical>
+        <Button type="light">按钮</Button>
+        <Button type="light">按钮</Button>
+        <Button type="light">按钮</Button>
+        <Button type="light">按钮</Button>
+      </ButtonGroup>
+    </Col>
+    <Col style={{ maxWidth: 120 }}>
+      <ButtonGroup vertical>
+        <Button type="primary">主要按钮</Button>
+        <Button type="success">成功按钮</Button>
+        <Button type="warning">警告按钮</Button>
+        <Button type="danger">错误按钮</Button>
+        <Button type="light">亮按钮</Button>
+        <Button type="dark">暗按钮</Button>
+      </ButtonGroup>
+    </Col>
+  </Row>
+);
+export default Demo
+
 ```
@@ -306,32 +308,32 @@
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button, Divider } from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
-      <Button basic type="primary">主要按钮</Button>
-      <Button basic type="success">成功按钮</Button>
-      <Button basic type="warning">警告按钮</Button>
-      <Button basic type="danger">错误按钮</Button>
-      <Button basic type="light">亮按钮</Button>
-      <Button basic type="dark">暗按钮</Button>
-      <Divider style={{ maxWidth: 220 }}>激活</Divider>
-      <Button basic active type="primary">主要按钮</Button>
-      <Button basic active type="success">成功按钮</Button>
-      <Button basic active type="warning">警告按钮</Button>
-      <Button basic active type="danger">错误按钮</Button>
-      <Button basic active type="light">亮按钮</Button>
-      <Button basic active type="dark">暗按钮</Button>
-      <Divider style={{ maxWidth: 220 }}>禁用</Divider>
-      <Button basic disabled type="primary">主要按钮</Button>
-      <Button basic disabled type="success">成功按钮</Button>
-      <Button basic disabled type="warning">警告按钮</Button>
-      <Button basic disabled type="danger">错误按钮</Button>
-      <Button basic disabled type="light">亮按钮</Button>
-      <Button basic disabled type="dark">暗按钮</Button>
-    </div>
-  );
-}
+const Demo = ()=>(
+  <div>
+    <Button basic type="primary">主要按钮</Button>
+    <Button basic type="success">成功按钮</Button>
+    <Button basic type="warning">警告按钮</Button>
+    <Button basic type="danger">错误按钮</Button>
+    <Button basic type="light">亮按钮</Button>
+    <Button basic type="dark">暗按钮</Button>
+    <Divider style={{ maxWidth: 220 }}>激活</Divider>
+    <Button basic active type="primary">主要按钮</Button>
+    <Button basic active type="success">成功按钮</Button>
+    <Button basic active type="warning">警告按钮</Button>
+    <Button basic active type="danger">错误按钮</Button>
+    <Button basic active type="light">亮按钮</Button>
+    <Button basic active type="dark">暗按钮</Button>
+    <Divider style={{ maxWidth: 220 }}>禁用</Divider>
+    <Button basic disabled type="primary">主要按钮</Button>
+    <Button basic disabled type="success">成功按钮</Button>
+    <Button basic disabled type="warning">警告按钮</Button>
+    <Button basic disabled type="danger">错误按钮</Button>
+    <Button basic disabled type="light">亮按钮</Button>
+    <Button basic disabled type="dark">暗按钮</Button>
+  </div>
+);
+export default Demo
+
 ```
@@ -343,5 +345,5 @@
 
-```jsx mdx:preview
-import React from 'react';
-import { Button, Divider } from 'uiw';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
+import { Button, Divider ,Icon } from 'uiw';
 
@@ -354,20 +356,20 @@ const chat = (
 
-export default function Demo() {
-  return(
-    <div>
-      <Button icon="weibo" basic type="primary">主要按钮</Button>
-      <Button icon="chrome" basic type="success">成功按钮</Button>
-      <Button icon="taobao" basic type="warning">警告按钮</Button>
-      <Button icon="apple" basic type="danger">错误按钮</Button>
-      <Button icon="weibo" basic type="dark">暗按钮</Button>
-      <Divider />
-      <Button icon="weibo" basic type="primary" />
-      <Button icon="chrome" basic type="success" />
-      <Button icon="taobao" basic type="warning" />
-      <Button icon="apple" basic type="danger" />
-      <Button icon="weibo" basic type="dark" />
-      <Button icon="weibo" basic type="dark" />
-    </div>
-  );
-}
+const Demo = ()=>(
+  <div>
+    <Button icon={<Icon type="weibo" />}  basic type="primary">主要按钮</Button>
+    <Button icon={<Icon type="chrome" />} basic type="success">成功按钮</Button>
+    <Button icon={<Icon type="taobao" />} basic type="warning">警告按钮</Button>
+    <Button icon={<Icon type="apple" />} basic type="danger">错误按钮</Button>
+    <Button icon={<Icon type="weibo" />} basic type="dark">暗按钮</Button>
+    <Divider />
+    <Button icon={<Icon type="weibo" />} basic type="primary" />
+    <Button icon={<Icon type="chrome" />} basic type="success" />
+    <Button icon={<Icon type="taobao" />} basic type="warning" />
+    <Button icon={<Icon type="apple" />} basic type="danger" />
+    <Button icon={<Icon type="weibo" />} basic type="dark" />
+    <Button icon={<Icon type="weibo" />} basic type="dark" />
+  </div>
+);
+export default Demo
+
 ```
@@ -377,19 +379,19 @@
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button } from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
-      <Button active type="primary">主要按钮</Button>
-      <Button active type="success">成功按钮</Button>
-      <Button active type="warning">警告按钮</Button>
-      <Button active type="danger">错误按钮</Button>
-      <Button active type="light">亮按钮</Button>
-      <Button active type="dark">暗按钮</Button>
-      <Button active type="link"> (超连接样式)link </Button>
-    </div>
-  );
-}
+const Demo = ()=>(
+  <div>
+    <Button active type="primary">主要按钮</Button>
+    <Button active type="success">成功按钮</Button>
+    <Button active type="warning">警告按钮</Button>
+    <Button active type="danger">错误按钮</Button>
+    <Button active type="light">亮按钮</Button>
+    <Button active type="dark">暗按钮</Button>
+    <Button active type="link"> (超连接样式)link </Button>
+  </div>
+);
+export default Demo
+
 ```
@@ -399,19 +401,19 @@
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button } from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
-      <Button disabled type="primary">主要按钮</Button>
-      <Button disabled type="success">成功按钮</Button>
-      <Button disabled type="warning">警告按钮</Button>
-      <Button disabled type="danger">错误按钮</Button>
-      <Button disabled type="light">亮按钮</Button>
-      <Button disabled type="dark">暗按钮</Button>
-      <Button disabled type="link"> (超连接样式)link </Button>
-    </div>
-  );
-}
+const Demo = ()=>(
+  <div>
+    <Button disabled type="primary">主要按钮</Button>
+    <Button disabled type="success">成功按钮</Button>
+    <Button disabled type="warning">警告按钮</Button>
+    <Button disabled type="danger">错误按钮</Button>
+    <Button disabled type="light">亮按钮</Button>
+    <Button disabled type="dark">暗按钮</Button>
+    <Button disabled type="link"> (超连接样式)link </Button>
+  </div>
+);
+export default Demo
+
 ```
@@ -422,20 +424,19 @@
 
-```jsx mdx:preview
-import React from 'react';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Button, Row, Col } from 'uiw';
 
-export default function Demo() {
-  return(
-    <Row gutter={10}>
-      <Col style={{ maxWidth: 320 }}>
-        <Button block type="primary">主要按钮</Button>
-        <Button block type="success">成功按钮</Button>
-        <Button block type="warning">警告按钮</Button>
-        <Button block type="danger">错误按钮</Button>
-        <Button block type="light">亮按钮</Button>
-        <Button block type="dark">暗按钮</Button>
-      </Col>
-    </Row>
-  );
-}
+const Demo = ()=>(
+  <Row gutter={10}>
+    <Col style={{ maxWidth: 320 }}>
+      <Button block type="primary">主要按钮</Button>
+      <Button block type="success">成功按钮</Button>
+      <Button block type="warning">警告按钮</Button>
+      <Button block type="danger">错误按钮</Button>
+      <Button block type="light">亮按钮</Button>
+      <Button block type="dark">暗按钮</Button>
+    </Col>
+  </Row>
+);
+export default Demo
 ```
@@ -447,23 +448,23 @@
 
-```jsx mdx:preview
-import React from 'react';
-import { Button, Divider } from 'uiw';
+```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true
+import React from "react"
+import { Button, Divider  ,Icon} from 'uiw';
 
-export default function Demo() {
-  return(
-    <div>
-      <Button size="small" type="primary">主要按钮</Button>
-      <Button size="default" type="success">成功按钮</Button>
-      <Button size="large" type="warning">警告按钮</Button>
-      <Button size="small" type="danger">错误按钮</Button>
-      <Button size="default" type="light">亮按钮</Button>
-      <Button size="large" type="dark">暗按钮</Button>
-      <Divider />
-      <Button icon="weibo" size="small" type="primary">微博</Button>
-      <Button icon="chrome" size="small" type="success">谷歌浏览器</Button>
-      <Button icon="chrome" type="success">谷歌浏览器</Button>
-      <Button icon="apple" size="large" type="warning">淘宝</Button>
-    </div>
-  );
+const Demo =()=>{
+  return <div>
+    <Button size="small" type="primary">主要按钮</Button>
+    <Button size="default" type="success">成功按钮</Button>
+    <Button size="large" type="warning">警告按钮</Button>
+    <Button size="small" type="danger">错误按钮</Button>
+    <Button size="default" type="light">亮按钮</Button>
+    <Button size="large" type="dark">暗按钮</Button>
+    <Divider />
+    <Button icon={<Icon type="weibo" />} size="small" type="primary">微博</Button>
+    <Button icon={<Icon type="chrome" />} size="small" type="success">谷歌浏览器</Button>
+    <Button icon={<Icon type="chrome" />} type="success">谷歌浏览器</Button>
+    <Button icon={<Icon type="apple" />} size="large" type="warning">淘宝</Button>
+  </div>
 }
+
+export default Demo
 ```
@@ -490,2 +491,2 @@
 | -------- | -------- | -------- | -------- |
-| vertical | 竖排列 | Boolean | `false` |
+| vertical | 竖排列 | Boolean | `false` |

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

225759

171.42%

Number of package files

39

160%

Lines of code

1926

58.78%

Number of lines in readme file

479

0.42%

Worsened metrics

Dependency count

5

25%

Number of low quality alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @emotion/is-prop-valid@1.2.2
  (transitive)

• + Added

  @emotion/memoize@0.8.1
  (transitive)

• + Added

  @emotion/unitless@0.8.1
  (transitive)

• + Added

  @types/stylis@4.2.5
  (transitive)

• + Added

  @uiw/icons@2.6.1
  (transitive)

• + Added

  @uiw/react-icon@5.0.0-bate-9
  (transitive)

• + Added

  @uiw/utils@5.0.0-bate-9
  (transitive)

• + Added

  camelize@1.0.1
  (transitive)

• + Added

  css-color-keywords@1.0.0
  (transitive)

• + Added

  css-to-react-native@3.2.0
  (transitive)

• + Added

  csstype@3.1.3
  (transitive)

• + Added

  nanoid@3.3.11
  (transitive)

• + Added

  picocolors@1.1.1
  (transitive)

• + Added

  postcss@8.4.49
  (transitive)

• + Added

  postcss-value-parser@4.2.0
  (transitive)

• + Added

  shallowequal@1.1.0
  (transitive)

• + Added

  source-map-js@1.2.1
  (transitive)

• + Added

  styled-components@6.1.19
  (transitive)

• + Added

  stylis@4.3.2
  (transitive)

• + Added

  tslib@2.6.2
  (transitive)

• - Removed

  @uiw/icons@2.6.10
  (transitive)

• - Removed

  @uiw/react-icon@4.22.3
  (transitive)

• - Removed

  @uiw/utils@4.22.3
  (transitive)

• Updated

  @uiw/react-icon@^5.0.0-bate.2.0

• Updated

  @uiw/utils@^5.0.0-bate.2.0