feat(button): tag prop

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-button` add `tag` prop.
+
 ## 2.8.0
 
 ### Perf

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-button` 新增 `tag` 属性
+
 ## 2.8.0
 
 ### Perf

src/button/demos/enUS/index.demo-entry.md

@@ -9,6 +9,7 @@ basic
 dashed
 size
 text
+tag
 disabled
 icon
 events

src/button/demos/enUS/tag.demo.md

@@ -0,0 +1,14 @@
+# Tag
+
+You can render button as different tags. For example `<a />`. 你可以把按钮渲染成不同的标签，比如 `<a />`。
+
+```html
+<n-button
+  text
+  tag="a"
+  href="https://anyway.fm/news.php"
+  target="_blank"
+  type="primary"
+  >Anyway.News</n-button
+>
+```

src/button/demos/enUS/text.demo.md

@@ -1,6 +1,6 @@
 # Text Button
 
-Somebody also calls it `link` button.
+Just look like text.
 
 ```html
 <n-button text>

src/button/demos/zhCN/index.demo-entry.md

@@ -9,6 +9,7 @@ basic
 dashed
 size
 text
+tag
 disabled
 icon
 events

src/button/demos/zhCN/tag.demo.md

@@ -0,0 +1,14 @@
+# 标签
+
+你可以把按钮渲染成不同的标签，比如 `<a />`。
+
+```html
+<n-button
+  text
+  tag="a"
+  href="https://anyway.fm/news.php"
+  target="_blank"
+  type="primary"
+  >安妮薇时报</n-button
+>
+```

src/button/demos/zhCN/text.demo.md

@@ -1,6 +1,6 @@
 # 文本按钮
 
-有些人也会叫他 `link` 按钮。
+长得就像文本。
 
 ```html
 <n-button text>

src/button/src/Button.tsx

@@ -31,35 +31,14 @@ import style from './styles/button.cssr'
 const buttonProps = {
   ...(useTheme.props as ThemeProps<ButtonTheme>),
   color: String,
-  text: {
+  text: Boolean,
-    type: Boolean,
+  block: Boolean,
-    default: false
+  loading: Boolean,
-  },
+  disabled: Boolean,
-  block: {
+  circle: Boolean,
-    type: Boolean,
-    default: false
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  circle: {
-    type: Boolean,
-    default: false
-  },
   size: String as PropType<Size>,
-  ghost: {
+  ghost: Boolean,
-    type: Boolean,
+  round: Boolean,
-    default: false
-  },
-  round: {
-    type: Boolean,
-    default: false
-  },
   focusable: {
     type: Boolean,
     default: true
@@ -68,14 +47,15 @@ const buttonProps = {
     type: Boolean,
     default: true
   },
+  tag: {
+    type: String as PropType<keyof HTMLElementTagNameMap>,
+    default: 'button'
+  },
   type: {
     type: String as PropType<Type>,
     default: 'default'
   },
-  dashed: {
+  dashed: Boolean,
-    type: Boolean,
-    default: false
-  },
   iconPlacement: {
     type: String as PropType<'left' | 'right'>,
     default: 'left'
@@ -389,9 +369,9 @@ export default defineComponent({
     }
   },
   render () {
-    const { $slots, mergedClsPrefix } = this
+    const { $slots, mergedClsPrefix, tag: Component } = this
     return (
-      <button
+      <Component
         ref="selfRef"
         class={[
           `${mergedClsPrefix}-button`,
@@ -470,7 +450,7 @@ export default defineComponent({
             style={this.customColorCssVars as CSSProperties}
           />
         ) : null}
-      </button>
+      </Component>
     )
   }
 })

src/button/src/styles/button.cssr.ts

@@ -58,6 +58,7 @@ export default c([
     user-select: none;
     text-align: center;
     cursor: pointer;
+    text-decoration: none;
     transition:
       color .3s var(--bezier),
       background-color .3s var(--bezier),