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