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 }}