diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue index 954dc2fe8..09f0e6033 100644 --- a/front/src/components/ui/Button.vue +++ b/front/src/components/ui/Button.vue @@ -38,6 +38,7 @@ const props = defineProps<{ const slots = useSlots() const isIconOnly = computed(() => !!props.icon && !slots.default) +const isSplitIconOnly = computed(() => !!props.splitIcon && !props.splitTitle) const internalLoader = ref(false) const isLoading = computed(() => props.isLoading || internalLoader.value) @@ -99,14 +100,25 @@ onMounted(() => { v-bind="{ ...$attrs, ...color(props, ['interactive'])( - width(props, ['square'])( + width(props, isSplitIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])( align(props, { alignSelf:'start', alignText:'center' })( )))}" :disabled="disabled || undefined" - :class="['funkwhale', 'button', {'split-toggle': !dropdownOnly}]" - :title="splitTitle" + :class="[ + 'funkwhale', + 'button', + { + 'split-toggle': !dropdownOnly, + 'is-loading': isLoading, + 'is-icon-only': isSplitIconOnly, + 'has-icon': !!splitIcon, + 'is-round': round, + 'is-shadow': shadow + } + ]" @click="onSplitClick" > + {{ splitTitle }}