@@ -26,12 +26,12 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
`;
exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
-
Primary Primary(disabled) Default Default(disabled) Dashed Dashed(disabled)
+
Primary Primary(disabled) Default Default(disabled) Dashed Dashed(disabled) Link Link(disabled) Ghost Ghost(disabled)
`;
-exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
Primary Default Dashed danger
`;
+exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
Primary Default Dashed Danger Link
`;
exports[`renders ./components/button/demo/icon.md correctly 1`] = `
@@ -75,7 +75,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
exports[`renders ./components/button/demo/size.md correctly 1`] = `
-
Large Default Small
Primary Normal Dashed Danger
+ Large Default Small
Primary Normal Dashed Danger Link
-
- {iconNode}
- {kids}
-
-
- );
}
+
+ const buttonNode = (
+
+ {iconNode}
+ {kids}
+
+ );
+
+ if (type === 'link') {
+ return buttonNode;
+ }
+
+ return {buttonNode} ;
},
};
diff --git a/components/button/buttonTypes.js b/components/button/buttonTypes.js
index 66e592a33..b58b458a0 100644
--- a/components/button/buttonTypes.js
+++ b/components/button/buttonTypes.js
@@ -1,7 +1,7 @@
import PropTypes from '../_util/vue-types';
export default () => ({
prefixCls: PropTypes.string.def('ant-btn'),
- type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'),
+ type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'link', 'default']).def('default'),
htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
icon: PropTypes.string,
shape: PropTypes.oneOf(['circle', 'circle-outline']),
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index 55943099f..5afd06d8e 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -1,12 +1,12 @@
#### 按钮类型
-按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
+按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
#### Type
-There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
+There are `primary` button, `default` button, `dashed` button and `danger` button and `link` button in antd.
```html
@@ -16,6 +16,7 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
Default
Dashed
Danger
+ Link
Primary
Default
Dashed
- danger
+ Danger
+ Link
```
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index dcf66a99a..315688845 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -20,6 +20,9 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
Dashed
Dashed(disabled)
+
+
Link
+
Link(disabled)
Ghost
Ghost(disabled)
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index eccced014..aaeaa376e 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -14,7 +14,8 @@
Primary
Default
Dashed
-
danger
+
Danger
+
Link
```
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 0b290eaa2..576ad4fc1 100644
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -23,6 +23,7 @@ If a large or small button is desired, set the `size` property to either `large`
Normal
Dashed
Danger
+
Link
Download
@@ -51,4 +52,4 @@ export default {
},
}
-```
\ No newline at end of file
+```
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 9c3ea1361..7bd267e93 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -11,7 +11,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| loading | set the loading status of button | boolean \| { delay: number } | false |
| shape | can be set to `circle` or omitted | string | - |
| size | can be set to `small` `large` or omitted | string | `default` |
-| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
+| type | can be set to `primary` `ghost` `dashed` `danger` `link` or omitted (meaning `default`) | string | `default` |
| block | option to fit button width to its parent width | boolean | `false` |
### events
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index afd88a3a8..dcf71afc1 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -13,7 +13,7 @@
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
| shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` | string | - |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设| string | `default` |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
### 事件
diff --git a/components/button/style/index.less b/components/button/style/index.less
index 6f782647e..a1b12e4d1 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -69,6 +69,10 @@
.btn-danger;
}
+ &-link {
+ .btn-link;
+ }
+
&-circle,
&-circle-outline {
.btn-circle(@btn-prefix-cls);
@@ -157,6 +161,12 @@
.button-variant-ghost(@btn-danger-color);
}
+ &-background-ghost&-link {
+ .button-variant-ghost(@link-color; transparent);
+
+ color: @component-background;
+ }
+
&-two-chinese-chars:first-letter {
letter-spacing: 0.34em;
}
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index 285d47cff..d1bd4403b 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -7,7 +7,7 @@
height: @height;
}
-.button-disabled() {
+.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
&.disabled,
&[disabled] {
&,
@@ -15,7 +15,7 @@
&:focus,
&:active,
&.active {
- .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+ .button-color(@color; @background; @border);
text-shadow: none;
box-shadow: none;
}
@@ -83,18 +83,28 @@
.button-disabled();
}
-.button-variant-ghost(@color) {
- .button-color(@color; transparent; @color);
+.button-variant-ghost(@color; @border: @color) {
+ .button-color(@color; transparent; @border);
text-shadow: none;
&:hover,
&:focus {
- .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+ & when (@border = transparent) {
+ .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+ }
+ & when not(@border = transparent) {
+ .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+ }
}
&:active,
&.active {
- .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+ & when (@border = transparent) {
+ .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+ }
+ & when not(@border = transparent) {
+ .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+ }
}
.button-disabled();
@@ -242,6 +252,19 @@
.button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}
+// link button style
+.btn-link() {
+ .button-variant-other(@link-color, transparent, transparent);
+
+ box-shadow: none;
+ &:hover,
+ &:focus,
+ &:active {
+ border-color: transparent;
+ }
+ .button-disabled(@disabled-color; transparent; transparent);
+}
+
// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
.square(@btn-circle-size);