diff --git a/components/Button/__test__/__snapshots__/button.spec.ts.snap b/components/Button/__test__/__snapshots__/button.spec.ts.snap
index 9632651b..d43da5a1 100644
--- a/components/Button/__test__/__snapshots__/button.spec.ts.snap
+++ b/components/Button/__test__/__snapshots__/button.spec.ts.snap
@@ -1,11 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`Test: KButton > props: button lg size 1`] = `""`;
+
+exports[`Test: KButton > props: button md size 1`] = `""`;
+
+exports[`Test: KButton > props: button size 1`] = `""`;
+
+exports[`Test: KButton > props: button sm size 1`] = `""`;
+
exports[`Test: KButton > props: circle 1`] = `""`;
exports[`Test: KButton > props: disabled 1`] = `""`;
exports[`Test: KButton > props: icon 1`] = `""`;
+exports[`Test: KButton > props: isBorder 1`] = `""`;
+
exports[`Test: KButton > props: round 1`] = `""`;
exports[`Test: KButton > props: to 1`] = `" "`;
diff --git a/components/Button/__test__/button.spec.ts b/components/Button/__test__/button.spec.ts
index 7927a71f..bc762601 100644
--- a/components/Button/__test__/button.spec.ts
+++ b/components/Button/__test__/button.spec.ts
@@ -155,6 +155,56 @@ describe('Test: KButton', () => {
expect(host.innerHTML).matchSnapshot();
});
+ test('props: button md size', async () => {
+ const instance = new KButton({
+ target: host,
+ props: {
+ size: 'md'
+ }
+ });
+ expect(instance).toBeTruthy();
+ expect(!(host as HTMLElement)!.innerHTML.includes('k-button--sm')).toBeTruthy();
+ expect(!(host as HTMLElement)!.innerHTML.includes('k-button--lg')).toBeTruthy();
+ expect(host.innerHTML).matchSnapshot();
+ });
+
+ test('props: button sm size', async () => {
+ const instance = new KButton({
+ target: host,
+ props: {
+ size: 'sm'
+ }
+ });
+ expect(instance).toBeTruthy();
+ expect((host as HTMLElement)!.innerHTML.includes('k-button--sm')).toBeTruthy();
+ expect(host.innerHTML).matchSnapshot();
+ });
+
+ test('props: button lg size', async () => {
+ const instance = new KButton({
+ target: host,
+ props: {
+ size: 'lg'
+ }
+ });
+ expect(instance).toBeTruthy();
+ expect((host as HTMLElement)!.innerHTML.includes('k-button--lg')).toBeTruthy();
+ expect(host.innerHTML).matchSnapshot();
+ });
+
+ test('props: isBorder', async () => {
+ const instance = new KButton({
+ target: host,
+ props: {
+ isBorder: true,
+ type: 'primary'
+ }
+ });
+ expect(instance).toBeTruthy();
+ expect((host as HTMLElement)!.innerHTML.includes('k-button--primary__border')).toBeTruthy();
+ expect(host.innerHTML).matchSnapshot();
+ });
+
test('event: should trigger click event', async () => {
const mockFn = vi.fn();
const instance = new KButton({
diff --git a/components/Button/src/index.svelte b/components/Button/src/index.svelte
index bffae4a0..396c6cf1 100644
--- a/components/Button/src/index.svelte
+++ b/components/Button/src/index.svelte
@@ -11,6 +11,8 @@
export let attrs = {}
export let type: IKunTypePro = 'primary'
export let disabled = false
+ export let size: 'md' | 'sm' | 'lg' = 'md'
+ export let isBorder = false
// todo: button size
const dispatch = createEventDispatcher()
@@ -28,8 +30,17 @@
{
[`${prefixCls}__active ${prefixCls}__focus ${prefixCls}__hover`]: !disabled,
'k-cur-disabled k-button--disabled': disabled,
- 'k-button--circle': circle
+ 'k-button--circle': circle,
+ 'k-button--circle--sm': circle && size === 'sm',
+ 'k-button--circle--lg': circle && size === 'lg',
},
+ {
+ 'k-button--sm': size === 'sm',
+ 'k-button--lg': size === 'lg'
+ },
+ {
+ [`k-button--${type}__border`]: isBorder
+ },
cls
)
$: attrsInner = extend(attrs, to ? { href: to } : {})
diff --git a/docs/components/KButton.md b/docs/components/KButton.md
index 758fadb3..abc70885 100644
--- a/docs/components/KButton.md
+++ b/docs/components/KButton.md
@@ -44,6 +44,20 @@ Use the icon attribute to add icon.
+## Button Size
+
+Use the 'size' property to control the button size.
+It supports enumerations such as "normal", "large", and "small".
+
+
+
+## Button Border
+
+Use the 'isBorder' property to determine if the button is bordered.
+It accepts a "Boolean" value.
+
+
+
## Button Group
Displayed as a button group, can be used to group a series of similar operations.
diff --git a/docs/example/button/isBorder.svelte b/docs/example/button/isBorder.svelte
new file mode 100644
index 00000000..c57ffd85
--- /dev/null
+++ b/docs/example/button/isBorder.svelte
@@ -0,0 +1,33 @@
+
+
+
+ large
+ normal
+ small
+
+
+
+ settings
+ svelte
+ wechat
+
+
+
+
+ settings
+
+
+ svelte
+
+
+ wechat
+
+
+
+
+
+
+
+
diff --git a/docs/example/button/size.svelte b/docs/example/button/size.svelte
new file mode 100644
index 00000000..5f330fc5
--- /dev/null
+++ b/docs/example/button/size.svelte
@@ -0,0 +1,33 @@
+
+
+
+ lg
+ md
+ sm
+
+
+
+ settings
+ svelte
+ wechat
+
+
+
+
+ settings
+
+
+ svelte
+
+
+ wechat
+
+
+
+
+
+
+
+
diff --git a/preset/src/shortcuts/button.ts b/preset/src/shortcuts/button.ts
index 59075180..9f09e66a 100644
--- a/preset/src/shortcuts/button.ts
+++ b/preset/src/shortcuts/button.ts
@@ -1,9 +1,12 @@
export const buttonShortcuts: Record = {
- // button
+ // button
'k-button--disabled': 'opacity-50',
-
'k-button--base': 'rounded k-border cursor-pointer f-c px-2 py-1 text-base w-fit',
+ 'k-button--sm': 'text-sm px-1.5 py-0.8',
+ 'k-button--lg': 'text-lg px-3 py-2',
'k-button--circle': '!rounded-full p-2',
+ 'k-button--circle--sm': '!rounded-full !p-1',
+ 'k-button--circle--lg': '!rounded-full !p-3',
'k-button--primary': 'bg-ikun-primary-100 text-ikun-primary border-ikun-primary-100',
'k-button--primary__active': 'active:border-ikun-primary active:k-btn-shadow--primary',
@@ -11,6 +14,7 @@ export const buttonShortcuts: Record = {
'focus-visible:border-ikun-primary focus-visible:k-btn-shadow--primary',
'k-button--primary__hover': 'hover:border-ikun-primary',
'k-button--primary__icon': 'text-ikun-primary',
+ 'k-button--primary__border': 'border-ikun-primary',
'k-button--success': 'bg-ikun-success-100 text-ikun-success border-ikun-success-100',
'k-button--success__active': 'active:border-ikun-success active:k-btn-shadow--success',
@@ -18,12 +22,14 @@ export const buttonShortcuts: Record = {
'focus-visible:border-ikun-success focus-visible:k-btn-shadow--success',
'k-button--success__hover': 'hover:border-ikun-success',
'k-button--success__icon': 'text-ikun-success',
+ 'k-button--success__border': 'border-ikun-success',
'k-button--error': 'bg-ikun-error-100 text-ikun-error border-ikun-error-100',
'k-button--error__active': 'active:border-ikun-error active:k-btn-shadow--error',
'k-button--error__focus': 'focus-visible:border-ikun-error focus-visible:k-btn-shadow--error',
'k-button--error__hover': 'hover:border-ikun-error',
'k-button--error__icon': 'text-ikun-error',
+ 'k-button--error__border': 'border-ikun-error',
'k-button--warning': 'bg-ikun-warning-100 text-ikun-warning border-ikun-warning-100',
'k-button--warning__active': 'active:border-ikun-warning active:k-btn-shadow--warning',
@@ -31,10 +37,12 @@ export const buttonShortcuts: Record = {
'focus-visible:border-ikun-warning focus-visible:k-btn-shadow--warning',
'k-button--warning__hover': 'hover:border-ikun-warning',
'k-button--warning__icon': 'text-ikun-warning',
+ 'k-button--warning__border': 'border-ikun-warning',
'k-button--info': 'bg-ikun-info-100 text-ikun-info border-ikun-info-100',
'k-button--info__active': 'active:border-ikun-info active:k-btn-shadow--info',
'k-button--info__focus': 'focus-visible:border-ikun-info focus-visible:k-btn-shadow--info',
'k-button--info__hover': 'hover:border-ikun-info',
- 'k-button--info__icon': 'text-ikun-info'
+ 'k-button--info__icon': 'text-ikun-info',
+ 'k-button--info__border': 'border-ikun-info'
};