diff --git a/develop.md b/develop.md
index a1d7b0d..4f0c8c7 100644
--- a/develop.md
+++ b/develop.md
@@ -18,7 +18,7 @@
-
+
diff --git a/src/form/button.js b/src/form/button.js
new file mode 100644
index 0000000..828dd59
--- /dev/null
+++ b/src/form/button.js
@@ -0,0 +1,203 @@
+/**
+ * {按钮组件}
+ * @author yutent
+ * @date 2023/03/06 15:17:25
+ */
+
+import { css, html, Component } from '@bd/core'
+import '../icon/index.js'
+
+class Button extends Component {
+ static props = {
+ icon: '',
+ autofocus: '',
+ loading: false,
+ disabled: false,
+ lazy: 0 // 并发拦截时间, 单位毫秒
+ }
+
+ static styles = css`
+ :host {
+ overflow: hidden;
+ display: inline-flex;
+ min-width: 128px;
+ height: 36px;
+ border-radius: 3px;
+ user-select: none;
+ -moz-user-select: none;
+ color: var(--color-dark-1);
+ font-size: 14px;
+ cursor: pointer;
+ transition: box-shadow 0.15s linear;
+
+ button {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ width: 100%;
+ height: inherit;
+ padding: var(--padding, 0 14px);
+ line-height: 1;
+ border: 1px solid var(--color-grey-2);
+ border-radius: inherit;
+ white-space: nowrap;
+ background: #fff;
+ font-size: inherit;
+ font-family: inherit;
+ outline: none;
+ color: inherit;
+ cursor: inherit;
+ transition: background 0.15s linear;
+
+ &::-moz-focus-inner {
+ border: none;
+ }
+ }
+
+ .icon {
+ --size: var(--icon-size, 18px);
+ }
+ }
+
+ :host([size='large']) {
+ min-width: 212px;
+ height: 52px;
+ font-size: 18px;
+
+ button {
+ padding: 0 24px;
+ }
+
+ .icon {
+ --size: 26px;
+ }
+ }
+ :host([size='large'][circle]) {
+ min-width: 52px;
+ width: 52px;
+ height: 52px;
+
+ button {
+ padding: 0;
+ }
+ }
+ :host([size='medium']) {
+ min-width: 160px;
+ height: 44px;
+
+ button {
+ padding: 0 18px;
+ }
+ }
+ :host([size='medium'][circle]) {
+ min-width: 44px;
+ width: 44px;
+ }
+ :host([size='small']) {
+ min-width: 96px;
+ height: 32px;
+ }
+ :host([size='small'][circle]) {
+ min-width: 32px;
+ width: 32px;
+ }
+ :host([size='mini']) {
+ min-width: 72px;
+ height: 26px;
+ font-size: 12px;
+
+ button {
+ padding: 0 6px;
+ }
+
+ .icon {
+ --size: 14px;
+ }
+ }
+ :host([size='mini'][circle]) {
+ min-width: 26px;
+ width: 26px;
+ }
+
+ :host([round]) {
+ border-radius: 26px;
+ }
+ :host([circle]) {
+ min-width: 36px;
+ width: 36px;
+ border-radius: 50%;
+ button {
+ padding: 0;
+ }
+ .icon {
+ margin-right: 0;
+ }
+
+ slot {
+ display: none;
+ }
+ }
+
+ :host(:focus-within) {
+ box-shadow: 0 0 0 2px var(--color-plain-a);
+ }
+
+ $colors: 'teal', 'blue', 'green', 'orange', 'red', 'dark', 'grey';
+
+ @each $c in $colors {
+ :host([#{$c}]) {
+ button {
+ color: var(--color-#{$c}-2);
+ border: 1px solid var(--color-#{$c}-2);
+
+ &:hover {
+ color: var(--color-#{$c}-1);
+ border-color: var(--color-#{$c}-1);
+ }
+ &:active {
+ color: var(--color-#{$c}-3);
+ }
+ &:disabled {
+ color: var(--color-#{$c}-2);
+ }
+ }
+
+ &:host([solid]) button {
+ border: 0;
+ color: #fff;
+ background: var(--color-#{$c}-2);
+
+ &:hover {
+ background: var(--color-#{$c}-1);
+ }
+ &:active {
+ background: var(--color-#{$c}-3);
+ }
+
+ &:disabled {
+ background: var(--color-#{$c}-2);
+ }
+ }
+
+ &:host(:focus-within) {
+ box-shadow: 0 0 0 2px var(--color-#{$c}-a);
+ }
+ }
+ }
+
+ :host([loading]),
+ :host([disabled]) {
+ cursor: not-allowed;
+ opacity: 0.6;
+ }
+ `
+
+ render() {
+ return html``
+ }
+}
+
+customElements.define('wc-button', Button)
diff --git a/src/icon/index.js b/src/icon/index.js
index fde42c3..a654516 100644
--- a/src/icon/index.js
+++ b/src/icon/index.js
@@ -15,7 +15,15 @@ if (window.EXT_SVG_DICT) {
class Icon extends Component {
static props = {
- is: ''
+ is: {
+ type: String,
+ default: null,
+ observer(val) {
+ if (val === '') {
+ this.is = null
+ }
+ }
+ }
}
static styles = css`