Add loading indicator for button
This commit is contained in:
@@ -5,6 +5,7 @@ type Props = {
|
|||||||
size?: "xl" | "lg" | "md";
|
size?: "xl" | "lg" | "md";
|
||||||
startIcon?: string;
|
startIcon?: string;
|
||||||
endIcon?: string;
|
endIcon?: string;
|
||||||
|
loading?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
// props
|
// props
|
||||||
@@ -35,8 +36,9 @@ const classes = computed(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button :class="classes">
|
<button :class="classes">
|
||||||
<Icon v-if="startIcon" :name="startIcon" />
|
<Icon v-if="!loading && startIcon" :name="startIcon" />
|
||||||
<slot />
|
<slot v-if="!loading" />
|
||||||
<Icon v-if="endIcon" :name="endIcon" />
|
<Icon v-if="!loading && endIcon" :name="endIcon" />
|
||||||
|
<Icon v-if="loading" name="svg-spinners:3-dots-fade" class="my-0.5" />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user