From 29790915ae7cf6dc89dd82a12cae626bb7d2e27b Mon Sep 17 00:00:00 2001
From: huangchen666 <45666106+huangchen666@users.noreply.github.com>
Date: Thu, 10 Feb 2022 15:58:27 +0800
Subject: [PATCH] V10 button (#1834)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ✨ 新增 `type ="icon"` 按钮类型
- ✨ 新增 `type="text"` 按钮类型
- 🦀️ 修改次级按钮样式

## break change
- 🦀️ disabled的按钮外层套了一层父元素，以支持 cursor: not-allowed  #142
---
 packages/zent/__tests__/button.spec.jsx       |   6 -
 packages/zent/__tests__/disabled.spec.jsx     |   4 +-
 packages/zent/assets/button.scss              | 154 +++++++++++++++---
 .../zent/assets/theme/semantic/_color.scss    |  11 +-
 packages/zent/src/button/Directive.tsx        |  11 +-
 packages/zent/src/button/README_en-US.md      |  10 +-
 packages/zent/src/button/README_zh-CN.md      |  11 +-
 packages/zent/src/button/demos/directive.md   |   6 +-
 packages/zent/src/button/demos/disabled.md    |  18 --
 packages/zent/src/button/demos/group.md       |  58 -------
 packages/zent/src/button/demos/icon.md        |  26 ---
 packages/zent/src/button/demos/link.md        |   2 +-
 packages/zent/src/button/demos/loading.md     |  31 ----
 packages/zent/src/button/demos/no-border.md   |  18 --
 packages/zent/src/button/demos/size.md        |   8 +-
 packages/zent/src/button/demos/status.md      |  67 ++++++++
 packages/zent/src/button/demos/style.md       |  16 +-
 17 files changed, 244 insertions(+), 213 deletions(-)
 delete mode 100644 packages/zent/src/button/demos/disabled.md
 delete mode 100644 packages/zent/src/button/demos/group.md
 delete mode 100644 packages/zent/src/button/demos/icon.md
 delete mode 100644 packages/zent/src/button/demos/loading.md
 delete mode 100644 packages/zent/src/button/demos/no-border.md
 create mode 100644 packages/zent/src/button/demos/status.md

diff --git a/packages/zent/__tests__/button.spec.jsx b/packages/zent/__tests__/button.spec.jsx
index f612bba604..18354b5a4b 100644
--- a/packages/zent/__tests__/button.spec.jsx
+++ b/packages/zent/__tests__/button.spec.jsx
@@ -66,12 +66,6 @@ describe('<Button />', () => {
     expect(buttonNode.classList.contains('zent-btn-danger-outline')).toBe(true);
   });
 
-  test('Transparent Border Button', () => {
-    const tree = renderIntoDocument(<Button bordered={false} />);
-    const buttonNode = findRenderedDOMComponentWithTag(tree, 'button');
-    expect(buttonNode.className).toContain('zent-btn-border-transparent');
-  });
-
   test('Large Button', () => {
     const tree = renderIntoDocument(<Button size="large" />);
     const buttonNode = findRenderedDOMComponentWithTag(tree, 'button');
diff --git a/packages/zent/__tests__/disabled.spec.jsx b/packages/zent/__tests__/disabled.spec.jsx
index 30f3a4d292..de77a7a3f2 100644
--- a/packages/zent/__tests__/disabled.spec.jsx
+++ b/packages/zent/__tests__/disabled.spec.jsx
@@ -57,7 +57,9 @@ it('disabled children', () => {
       ).length
     ).toBe(1);
     expect(
-      document.querySelectorAll('#root > .zent-btn-disabled.zent-btn').length
+      document.querySelectorAll(
+        '#root > .zent-btn-disabled-wrapper .zent-btn-disabled.zent-btn'
+      ).length
     ).toBe(1);
     expect(
       document.querySelectorAll(
diff --git a/packages/zent/assets/button.scss b/packages/zent/assets/button.scss
index 76bda24a69..6321d3c401 100644
--- a/packages/zent/assets/button.scss
+++ b/packages/zent/assets/button.scss
@@ -6,6 +6,13 @@ $btn-height-small: 24px;
 $btn-height-normal: 32px;
 $btn-height-large: 40px;
 
+$btn-icon-size-small: 24px;
+$btn-icon-size-small-font: 16px;
+$btn-icon-size-normal: 28px;
+$btn-icon-size-normal-font: 20px;
+$btn-icon-size-large: 32px;
+$btn-icon-size-large-font: 24px;
+
 @mixin btn-white($prop) {
   @include theme-color($prop, stroke, 9);
 }
@@ -15,7 +22,7 @@ $btn-height-large: 40px;
 }
 
 @mixin btn-light-grey($prop) {
-  @include theme-color($prop, stroke, 6);
+  @include theme-color($prop, stroke, 8);
 }
 
 /* styles begin */
@@ -156,8 +163,8 @@ $btn-warning-active: 1;
 
 .zent-btn {
   @include theme-color(color, stroke, 1);
-  @include btn-white(background-color);
-  @include theme-color(border-color, stroke, 5);
+  @include theme-color(background-color, stroke, 12, 0.06);
+  @include theme-color(border-color, stroke, 12, 0.06);
   display: inline-block;
   height: $btn-height-normal;
   line-height: $btn-height-normal - 2px;
@@ -172,6 +179,7 @@ $btn-warning-active: 1;
   box-sizing: border-box;
   cursor: pointer;
   transition: all 0.3s;
+  background-clip: padding-box;
 
   &:focus {
     outline: none;
@@ -185,25 +193,23 @@ $btn-warning-active: 1;
   }
 
   &:hover {
-    @include btn-primary-hover(color);
-    @include btn-primary-hover(border-color);
+    @include theme-color(background-color, stroke, 12, 0.03);
+    @include theme-color(border-color, stroke, 12, 0.03);
     text-decoration: none;
   }
 
   &:active {
     @include theme-color(color, stroke, 1);
-    @include theme-color(background-color, stroke, 10);
-    @include theme-color(border-color, stroke, 5);
+    @include theme-color(background-color, stroke, 12, 0.09);
     text-decoration: none;
   }
 
   &.zent-btn-loading {
-    &:hover,
-    &:active {
-      @include btn-white(background-color);
-      @include theme-color(border-color, stroke, 5);
-      border-width: 1px;
-      border-style: solid;
+    &.zent-btn-icon {
+      background-color: transparent;
+    }
+    &.zent-btn-text {
+      @include theme-color(background-color, primary, 4, 0.03);
     }
   }
 
@@ -225,12 +231,23 @@ $btn-warning-active: 1;
     height: $btn-height-large;
     line-height: $btn-height-large - 2px;
     font-size: $font-size-large;
+    &.zent-btn-icon {
+      height: $btn-icon-size-large;
+      width: $btn-icon-size-large;
+      font-size: $btn-icon-size-large-font;
+    }
   }
 
   &-small {
     height: $btn-height-small;
     line-height: $btn-height-small - 2px;
     padding: 0 8px;
+    font-size: $font-size-small;
+    &.zent-btn-icon {
+      height: $btn-icon-size-small;
+      width: $btn-icon-size-small;
+      font-size: $btn-icon-size-small-font;
+    }
   }
 
   &-block {
@@ -323,7 +340,6 @@ $btn-warning-active: 1;
     @include theme-color(background-color, stroke, 8);
     @include btn-light-grey(border-color);
     @include prevent-pointer-events;
-
     &:link,
     &:visited,
     &:focus {
@@ -343,6 +359,74 @@ $btn-warning-active: 1;
     }
   }
 
+  &-text {
+    @include theme-color(background-color, primary, 4, 0.03);
+    @include theme-color(color, primary, 4);
+    font-size: $font-size-small;
+    height: $btn-height-small;
+    line-height: $btn-height-small;
+    padding: 0 8px;
+    border: 0;
+
+    &:link,
+    &:visited,
+    &:hover,
+    &:active,
+    &:focus {
+      border: 0;
+      @include theme-color(color, primary, 4);
+    }
+
+    &:hover {
+      @include theme-color(background-color, primary, 4, 0.06);
+    }
+
+    &:active {
+      @include theme-color(background-color, primary, 4, 0.09);
+    }
+  }
+
+  &-icon {
+    height: $btn-icon-size-normal;
+    width: $btn-icon-size-normal;
+    font-size: $btn-icon-size-normal-font;
+    color: $text-600;
+    background-color: transparent;
+    padding: 0;
+    line-height: $btn-height-small;
+    text-align: center;
+    border-radius: 2px;
+    border: 0;
+
+    &:link,
+    &:visited,
+    &:hover,
+    &:active,
+    &:focus {
+      color: $text-600;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    i.zenticon {
+      margin: 0;
+
+      &:last-child {
+        margin: 0;
+      }
+
+      &:first-child {
+        margin: 0;
+      }
+    }
+  }
+
   &-loading {
     position: relative;
     color: transparent;
@@ -372,12 +456,33 @@ $btn-warning-active: 1;
     }
 
     &::after {
+      @include theme-color(border-top-color, stroke, 1);
+      @include theme-color(border-right-color, stroke, 1);
+      @include theme-color(border-bottom-color, stroke, 9);
+      @include theme-color(border-left-color, stroke, 9);
+      animation: zent-ani-spin 0.6s linear;
+      animation-iteration-count: infinite;
+    }
+
+    &.zent-btn-small::after,
+    &.zent-btn-text::after {
+      width: 12px;
+      height: 12px;
+      margin-left: -6px;
+      margin-top: -6px;
+      border-radius: 6px;
+    }
+
+    &.zent-btn-text::after {
       @include theme-color(border-top-color, primary, 4);
       @include theme-color(border-right-color, primary, 4);
       @include theme-color(border-bottom-color, section, bg);
       @include theme-color(border-left-color, section, bg);
-      animation: zent-ani-spin 0.6s linear;
-      animation-iteration-count: infinite;
+    }
+
+    &.zent-btn-icon::after {
+      @include theme-color(border-top-color, stroke, 1);
+      @include theme-color(border-right-color, stroke, 1);
     }
   }
 
@@ -393,19 +498,26 @@ $btn-warning-active: 1;
     }
   }
 
+  &:not(.zent-btn-icon, .zent-btn-text) .zenticon {
+    font-size: 20px;
+    vertical-align: -2px;
+  }
+
   .zenticon:first-child {
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   .zenticon:last-child {
-    margin-left: 8px;
+    margin-left: 4px;
   }
 
   &-group {
     display: inline-block;
-
-    .zent-btn + .zent-btn {
-      margin-left: -1px;
+    .zent-btn + .zent-btn,
+    .zent-btn-disabled-wrapper + .zent-btn,
+    .zent-btn + .zent-btn-disabled-wrapper,
+    .zent-btn-disabled-wrapper + .zent-btn-disabled-wrapper {
+      margin-left: 1px;
     }
 
     .zent-btn {
diff --git a/packages/zent/assets/theme/semantic/_color.scss b/packages/zent/assets/theme/semantic/_color.scss
index d6aa1cfc88..b45e212f3e 100644
--- a/packages/zent/assets/theme/semantic/_color.scss
+++ b/packages/zent/assets/theme/semantic/_color.scss
@@ -93,7 +93,8 @@ $default-colors: (
   'selected': $text-200,
   'disabled-color': $text-400,
   'disabled-bg': $text-200,
-  'disabled-border-color': $text-400
+  'disabled-border-color': $text-400,
+  'bg': $text-700
 );
 
 $primary-colors: (
@@ -164,6 +165,10 @@ $theme-stroke-9: map-get(
 // Button background color
 $theme-stroke-10: map-get($section-colors, 'border-color') !default; // Active
 $theme-stroke-11: map-get(map-get($color-sets, 'body'), 'bg') !default; // Hover
+$theme-stroke-12: map-get(
+  map-get($color-sets, 'default'),
+  'bg'
+) !default; // default-back
 
 // Blue(primary)
 $theme-primary-1: map-get(
@@ -310,6 +315,10 @@ $theme-colors-mapping: (
       cat: 'body',
       attr: 'bg',
     ),
+    (
+      cat: 'default',
+      attr: 'bg',
+    ),
   ),
   'primary': (
     (
diff --git a/packages/zent/src/button/Directive.tsx b/packages/zent/src/button/Directive.tsx
index 85d1724059..7b53f2f247 100644
--- a/packages/zent/src/button/Directive.tsx
+++ b/packages/zent/src/button/Directive.tsx
@@ -24,7 +24,9 @@ export type IButtonType =
   | 'danger'
   | 'warning'
   | 'error'
-  | 'success';
+  | 'success'
+  | 'text'
+  | 'icon';
 
 export type IButtonHtmlType = 'button' | 'submit' | 'reset';
 
@@ -86,9 +88,11 @@ export function ButtonDirective<ChildProps extends IButtonDirectiveChildProps>(
     onClick?.(e);
   }, []);
   const iconNode = icon ? <Icon type={icon} /> : null;
+  // icon text 或者 outline 为false 不需要outline
+  const needOutline = type !== 'text' && type !== 'icon' && outline;
   const className = cx(
     {
-      [`zent-btn-${type}${outline ? '-outline' : ''}`]: type !== 'default',
+      [`zent-btn-${type}${needOutline ? '-outline' : ''}`]: type !== 'default',
       [`zent-btn-${size}`]: size !== 'medium',
       'zent-btn-block': block,
       'zent-btn-loading': loading,
@@ -115,7 +119,8 @@ export function ButtonDirective<ChildProps extends IButtonDirectiveChildProps>(
   );
 
   return renderCompatibleChildren(commonChildren, {
-    disabled: popoverHoverTriggerContext.fixMouseEventsOnDisabledChildren,
+    disabled:
+      popoverHoverTriggerContext.fixMouseEventsOnDisabledChildren || disabled,
     onMouseEnter,
     onMouseLeave,
   });
diff --git a/packages/zent/src/button/README_en-US.md b/packages/zent/src/button/README_en-US.md
index f7bb847ec3..c088016a2c 100644
--- a/packages/zent/src/button/README_en-US.md
+++ b/packages/zent/src/button/README_en-US.md
@@ -1,7 +1,7 @@
 ---
 title: Button
 path: component/button
-group: Data Entry
+group: Basics
 ---
 
 ## Button
@@ -29,7 +29,6 @@ Button. Basic style and basic status are provided.
 | disabled         | controls status                                                                                      | bool   | `false`     |                                      |
 | loading          | controls status                                                                                      | bool   | `false`     |                                      |
 | outline          | determines whether the background is transparent                                                     | bool   | `false`     |                                      |
-| bordered         | determines whether the border is displayed                                                           | bool   | `true`      |                                      |
 | Other Properties |                                                                                                      |        |             |                                      |
 | href             | Optional, the component will be rendered as an a tag instead of a button tag if this property is set | string |             |                                      |
 | target           | Optional, used together with href, which is the target property of the a tag                         | string | `''`        | `'_blank'`                           |
@@ -40,10 +39,3 @@ Button. Basic style and basic status are provided.
 #### ButtonDirective
 
 `ButtonDirective` renders button styles onto its child. Use this to make a `react-router` `Link` look like a button, and preserve all of its router functionalities.
-
-#### ButtonGroup
-
-| Property  | Description       | Type   | Default  | Alternative |
-| --------- | ----------------- | ------ | -------- | ----------- |
-| className | custom class name | string |          |             |
-| style     | custom style      | object |          |             |
diff --git a/packages/zent/src/button/README_zh-CN.md b/packages/zent/src/button/README_zh-CN.md
index a8eef1f68b..1afb41e3ee 100644
--- a/packages/zent/src/button/README_zh-CN.md
+++ b/packages/zent/src/button/README_zh-CN.md
@@ -2,12 +2,12 @@
 title: Button
 subtitle: 按钮
 path: component/button
-group: 数据
+group: 基础控件
 ---
 
 ## Button 按钮
 
-按钮, 提供基础样式及基础状态.
+用于触发操作的可点击元素。用来传达用户可以执行的操作并允许用户与页面交互。
 
 ### 使用指南
 
@@ -30,7 +30,6 @@ group: 数据
 | disabled  | 状态控制                                          | bool   | `false`     |                                      |
 | loading   | 状态控制                                          | bool   | `false`     |                                      |
 | outline   | 边框有颜色，内部没有颜色                          | bool   | `false`     |                                      |
-| bordered  | 边框透明控制                                      | bool   | `true`      |                                      |
 | 其他参数  |                                                   |        |             |                                      |
 | href      | 可选，如果设置的话会用 a 标签而不是 button        | string |             |                                      |
 | target    | 可选，和 href 一起使用，就是 a 标签的 target 属性 | string | `''`        | `'_blank'`                           |
@@ -42,9 +41,3 @@ group: 数据
 
 这个组件会将 `Button` 的样式渲染到自己的 `children` 上，主要用在需要 `Button` 的样式，但是需要有特殊逻辑的按钮，例如将一个 `react-router` 的 `Link` 渲染成 `Button` 的样式，但是保留 `Link` 自身的功能。API 只支持 `Button` 的样式参数，用法参考 demo。
 
-#### ButtonGroup
-
-| 参数      | 说明       | 类型   | 默认值   | 备选值 |
-| --------- | ---------- | ------ | -------- | ------ |
-| className | 自定义类名 | string |          |        |
-| style     | 自定 style | object |          |        |
diff --git a/packages/zent/src/button/demos/directive.md b/packages/zent/src/button/demos/directive.md
index c10d809239..a6ed624154 100644
--- a/packages/zent/src/button/demos/directive.md
+++ b/packages/zent/src/button/demos/directive.md
@@ -1,11 +1,11 @@
 ---
-order: 10
+order: 11
 zh-CN:
 	title: Directive
-	button: Link
+	button: 按钮
 en-US:
 	title: Directive
-	button: Link
+	button: Button
 ---
 
 ```jsx
diff --git a/packages/zent/src/button/demos/disabled.md b/packages/zent/src/button/demos/disabled.md
deleted file mode 100644
index 3ba92ca7d1..0000000000
--- a/packages/zent/src/button/demos/disabled.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-order: 4
-zh-CN:
-	title: 不可用的状态
-	button: 不可用的按钮
-en-US:
-	title: Disabled
-	button: Button disabled
----
-
-```jsx
-import { Button } from 'zent';
-
-ReactDOM.render(
-	<Button disabled>{i18n.button}</Button>
-	, mountNode
-);
-```
diff --git a/packages/zent/src/button/demos/group.md b/packages/zent/src/button/demos/group.md
deleted file mode 100644
index a5715269e5..0000000000
--- a/packages/zent/src/button/demos/group.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-order: 9
-zh-CN:
-	title: Button Group 
-	b: 加粗
-	i: 斜体
-	u: 下划线
-	l: 左对齐
-	m: 居中 
-	r: 右对齐
-	share: 分享
-	download: 下载
-en-US:
-	title: Button Groupe
-	b: B
-	i: I 
-	u: U 
-	l: L 
-	m: M 
-	r: R 
-	share: Share
-	download: Download
----
-
-```jsx
-import { ButtonGroup, Button } from 'zent';
-
-ReactDOM.render(
-	<div>
-		<ButtonGroup>
-			<Button>{i18n.b}</Button>
-			<Button>{i18n.i}</Button>
-			<Button>{i18n.u}</Button>
-		</ButtonGroup>
-		<br />
-		<br />
-		<ButtonGroup>
-			<Button>{i18n.l}</Button>
-			<Button>{i18n.m}</Button>
-			<Button>{i18n.r}</Button>
-		</ButtonGroup>
-		<br />
-		<br />
-		<ButtonGroup>
-			<Button disabled>{i18n.l}</Button>
-			<Button disabled>{i18n.m}</Button>
-			<Button disabled>{i18n.r}</Button>
-		</ButtonGroup>
-		<br />
-		<br />
-		<ButtonGroup>
-			<Button type="primary" icon="share">{i18n.share}</Button>
-			<Button type="primary" icon="download">{i18n.download}</Button>
-		</ButtonGroup>
-	</div>
-	, mountNode
-);
-```
diff --git a/packages/zent/src/button/demos/icon.md b/packages/zent/src/button/demos/icon.md
deleted file mode 100644
index 98c73c0204..0000000000
--- a/packages/zent/src/button/demos/icon.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-order: 8
-zh-CN:
-	title: 按钮图标
-	search: 搜索
-	save: 保存
-	nextStep: 下一步
-en-US:
-	title: Button Icon
-	search: Search
-	save: Save
-	nextStep: Next step 
----
-
-```jsx
-import { Button, Icon } from 'zent';
-
-ReactDOM.render(
-  <div>
-    <Button icon="search">{i18n.search}</Button>
-    <Button><Icon type="check" />{i18n.save}</Button>
-		<Button>{i18n.nextStep}<Icon type="right" /></Button>
-  </div>
-	, mountNode
-);
-```
diff --git a/packages/zent/src/button/demos/link.md b/packages/zent/src/button/demos/link.md
index 44306d830a..efee8e369c 100644
--- a/packages/zent/src/button/demos/link.md
+++ b/packages/zent/src/button/demos/link.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 10
 zh-CN:
 	title: 将按钮变成链接, 只需要提供`href`属性，并可以通过`target`属性控制打开方式
 	index: 有赞首页
diff --git a/packages/zent/src/button/demos/loading.md b/packages/zent/src/button/demos/loading.md
deleted file mode 100644
index 609dd167b9..0000000000
--- a/packages/zent/src/button/demos/loading.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-order: 3
-zh-CN:
-	title: 正在加载的状态
-	button1: 实心按钮
-	button2: 描边按钮
-	button3: 普通按钮
-en-US:
-	title: Loading
-	button1: Filled
-	button2: Outline
-	button3: Normal
----
-
-```jsx
-import { Button } from 'zent';
-
-ReactDOM.render(
-	<div>
-		<div>
-			<Button loading type="primary">
-				{i18n.button1}
-			</Button>
-		</div>
-		<div style={{ marginTop: 10 }}>
-			<Button loading>{i18n.button3}</Button>
-		</div>
-	</div>,
-	mountNode
-);
-```
diff --git a/packages/zent/src/button/demos/no-border.md b/packages/zent/src/button/demos/no-border.md
deleted file mode 100644
index 0cd3ae37ab..0000000000
--- a/packages/zent/src/button/demos/no-border.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-order: 6
-zh-CN:
-	title: 无边框按钮，一般在背景色比较深的地方使用，使用时要注意和背景色的对比区分。
-	button: 无边框
-en-US:
-	title: Button without border, generally used in a darker background. Make sure the colors are different between background and button.
-	button: No border
----
-
-```jsx
-import { Button } from 'zent';
-
-ReactDOM.render(
-	<Button bordered={false} type="primary">{i18n.button}</Button>
-	, mountNode
-);
-```
diff --git a/packages/zent/src/button/demos/size.md b/packages/zent/src/button/demos/size.md
index f6403f9f9b..0ed4edb4d8 100644
--- a/packages/zent/src/button/demos/size.md
+++ b/packages/zent/src/button/demos/size.md
@@ -1,15 +1,17 @@
 ---
-order: 5
+order: 6
 zh-CN:
 	title: 按钮大小
 	normalButton: 正常按钮
 	bigButton: 大号按钮
 	smallButton: 小号按钮
+  textButton: 文字按钮
 en-US:
 	title: Button sizes
 	normalButton: Normal
 	bigButton: Big
 	smallButton: Small
+	textButton: text
 ---
 
 ```jsx
@@ -20,6 +22,10 @@ ReactDOM.render(
 		<Button size="large">{i18n.bigButton}</Button>
 		<Button>{i18n.normalButton}</Button>
 		<Button size="small">{i18n.smallButton}</Button>
+		<Button type="icon" icon="search" size="large"></Button>
+		<Button type="icon" icon="search"></Button>
+		<Button type="icon" icon="search" size="small"></Button>
+		<Button type="text">{i18n.textButton}</Button>
 	</div>
 	, mountNode
 );
diff --git a/packages/zent/src/button/demos/status.md b/packages/zent/src/button/demos/status.md
new file mode 100644
index 0000000000..72d0ac4969
--- /dev/null
+++ b/packages/zent/src/button/demos/status.md
@@ -0,0 +1,67 @@
+---
+order: 7
+zh-CN:
+	title: 按钮状态
+	button1: 主按钮
+	button3: 次按钮
+	button2: 文字按钮
+en-US:
+	title: Loading
+	button1: Filled
+	button3: Normal
+	button2: text
+---
+
+```jsx
+import { Button } from 'zent';
+
+ReactDOM.render(
+	<div>
+		<div>
+			<Button type="primary">
+				{i18n.button1}
+			</Button>
+			<Button disabled type="primary">
+				{i18n.button1}
+			</Button>
+			<Button loading type="primary">
+				{i18n.button1}
+			</Button>
+			<Button icon="search" type="primary">
+				{i18n.button1}
+			</Button>
+		</div>
+		<div style={{ marginTop: 36 }}>
+			<Button>
+				{i18n.button3}
+			</Button>
+			<Button disabled>
+				{i18n.button3}
+			</Button>
+			<Button loading>
+				{i18n.button3}
+			</Button>
+			<Button icon="search">
+				{i18n.button3}
+			</Button>
+		</div>
+		<div style={{ marginTop: 36 }}>
+			<Button type="text">
+				{i18n.button2}
+			</Button>
+			<Button disabled type="text">
+				{i18n.button2}
+			</Button>
+			<Button loading type="text">
+				{i18n.button2}
+			</Button>
+		</div>
+		<div style={{ marginTop: 36 }}>
+			<Button type="icon" icon="search" />
+			<Button disabled type="icon" icon="search" />
+			<Button loading type="icon" icon="search" />
+		</div>
+	</div>,
+	mountNode
+);
+```
diff --git a/packages/zent/src/button/demos/style.md b/packages/zent/src/button/demos/style.md
index 002eeb7793..77532ed44d 100644
--- a/packages/zent/src/button/demos/style.md
+++ b/packages/zent/src/button/demos/style.md
@@ -1,15 +1,17 @@
 ---
 order: 2
 zh-CN:
-	title: 风格
-	button1: 实心按钮
-	button2: 描边按钮
-	button3: 普通按钮
+	title: 按钮类型
+	button1: 主按钮
+	button2: 文字按钮
+	button3: 次按钮
+  button4: 图标按钮
 en-US:
 	title: Style
 	button1: Filled
-	button2: Outline
+	button2: text
 	button3: Normal
+	button4: icon
 ---
 
 ```jsx
@@ -19,9 +21,9 @@ ReactDOM.render(
 	<div>
 		<div>
 			<Button type="primary">{i18n.button1}</Button>
-		</div>
-		<div style={{ marginTop: 10 }}>
 			<Button>{i18n.button3}</Button>
+			<Button type="text">{i18n.button2}</Button>
+			<Button type='icon' icon='search'></Button>
 		</div>
 	</div>,
 	mountNode