[WIP] replace buttons with new ui component

front/src/components/album/Widget.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import AlbumCard from '~/components/album/Card.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -111,13 +112,12 @@ watch(
     </slot>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
         {{ t('components.audio.album.Widget.button.more') }}
-      </button>
+      </Button>
     </template>
   </div>
 </template>

front/src/components/artist/Widget.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ArtistCard from '~/components/artist/Card.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -107,13 +108,12 @@ watch(
     </slot>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
         {{ t('components.audio.artist.Widget.button.more') }}
-      </button>
+      </Button>
     </template>
   </div>
 </template>

front/src/components/audio/ChannelSeries.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
 import AlbumCard from '~/components/audio/album/Card.vue'
+import Button from '~/components/ui/Button.vue'
 
 interface Props {
   filters: object
@@ -82,13 +83,12 @@ fetchData()
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
         {{ t('components.audio.ChannelSeries.button.showMore') }}
-      </button>
+      </Button>
     </template>
     <template v-if="!isLoading && albums.length === 0">
       <empty-state

front/src/components/audio/ChannelsWidget.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ChannelCard from '~/components/audio/ChannelCard.vue'
+import Button from '~/components/ui/Button.vue'
 
 interface Events {
   (e: 'fetched', channels: BackendResponse<Channel>): void
@@ -75,13 +76,12 @@ fetchData()
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
         {{ t('components.audio.ChannelsWidget.button.showMore') }}
-      </button>
+      </Button>
     </template>
     <template v-if="!isLoading && channels.length === 0">
       <empty-state

front/src/components/audio/track/Widget.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import useWebSocketHandler from '~/composables/useWebSocketHandler'
+import Button from '~/components/ui/Button.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
@@ -219,12 +220,11 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage as string)"
       >
         {{ t('components.audio.track.Widget.button.more') }}
-      </button>
+      </Button>
     </template>
   </div>
 </template>

front/src/components/auth/Authorize.vue

@@ -9,6 +9,7 @@ import { ref, computed } from 'vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useScopes from '~/composables/auth/useScopes'
 import useFormData from '~/composables/useFormData'
+import Button from '~/components/ui/Button.vue'
 
 interface Props {
   clientId: string
@@ -204,13 +205,12 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
               <li>{{ unknownscope }}</li>
             </ul>
           </div>
-          <button
+          <Button
-            class="ui success labeled icon button"
+            icon="bi-unlock"
             type="submit"
           >
-            <i class="lock open icon" />
             {{ t('components.auth.Authorize.button.authorize', { app: application.name }) }}
-          </button>
+          </Button>
           <p
             v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'"
           >

front/src/components/auth/Logout.vue

@@ -3,6 +3,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
+import Button from '~/components/ui/Button.vue'
+
 const store = useStore()
 const { t } = useI18n()
 
@@ -27,12 +29,11 @@ const labels = computed(() => ({
         <p>
           {{ t('components.auth.Logout.message.loggedIn', { username: store.state.auth.username }) }}
         </p>
-        <button
+        <Button
-          class="ui button"
           @click="store.dispatch('auth/logout')"
         >
           {{ t('components.auth.Logout.button.logout') }}
-        </button>
+        </Button>
       </div>
       <div
         v-else

front/src/components/common/EmptyState.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
+import Button from '~/components/ui/Button.vue'
 
 interface Events {
   (e: 'refresh'): void
@@ -30,13 +31,12 @@ withDefaults(defineProps<Props>(), {
     </h4>
     <div class="inline center aligned text">
       <slot />
-      <button
+      <Button
         v-if="refresh"
-        class="ui button"
         @click="emit('refresh')"
       >
         {{ t('components.common.EmptyState.button.refresh') }}
-      </button>
+      </Button>
     </div>
   </div>
 </template>

front/src/components/federation/FetchButton.vue

@@ -3,6 +3,7 @@ import type { BackendError } from '~/types'
 
 import axios from 'axios'
 import SemanticModal from '~/components/semantic/Modal.vue'
+import Button from '~/components/ui/Button.vue'
 import { useTimeoutFn } from '@vueuse/core'
 import { ref } from 'vue'
 
@@ -212,16 +213,15 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
         </div>
       </div>
       <div class="actions">
-        <button class="ui basic cancel button">
+        <Button color="secondary">
           {{ t('components.federation.FetchButton.button.close') }}
-        </button>
+        </Button>
-        <button
+        <Button
           v-if="data && data.status === 'finished'"
-          class="ui confirm success button"
           @click.prevent="showModal = false; emit('refresh')"
         >
           {{ t('components.federation.FetchButton.button.reload') }}
-        </button>
+        </Button>
       </div>
     </semantic-modal>
   </div>

front/src/components/federation/LibraryWidget.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import LibraryCard from '~/views/content/remote/Card.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -90,13 +91,12 @@ fetchData()
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
         {{ t('components.federation.LibraryWidget.button.showMore') }}
-      </button>
+      </Button>
     </template>
   </div>
 </template>

front/src/components/forms/PasswordInput.vue

@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n'
 import { useClipboard, useVModel } from '@vueuse/core'
 import { useStore } from '~/store'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'update:modelValue', value: string): void
 }
@@ -53,22 +55,20 @@ const copyPassword = () => {
       name="password"
       :type="passwordInputType"
     >
-    <button
+    <Button
       type="button"
       :title="labels.title"
-      class="ui icon button"
+      icon="bi-eye"
       @click.prevent="showPassword = !showPassword"
     >
-      <i class="eye icon" />
+    </Button>
-    </button>
+    <Button
-    <button
       v-if="copyButton && canCopy"
       type="button"
-      class="ui icon button"
+      icon="bi-copy"
       :title="labels.copy"
       @click.prevent="copyPassword"
     >
-      <i class="copy icon" />
+    </Button>
-    </button>
   </div>
 </template>

front/src/components/library/Albums.vue

@@ -17,6 +17,7 @@ import $ from 'jquery'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import AlbumCard from '~/components/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -141,13 +142,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
                 name="search"
                 :placeholder="labels.searchPlaceholder"
               >
-              <button
+              <Button
-                class="ui icon button"
                 type="submit"
                 :aria-label="t('components.library.Albums.button.search')"
               >
                 <i class="search icon" />
-              </button>
+              </Button>
             </div>
           </div>
           <div class="field">

front/src/components/library/ArtistBase.vue

@@ -13,6 +13,7 @@ import useLogger from '~/composables/useLogger'
 
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import SemanticModal from '~/components/semantic/Modal.vue'
+import Button from '~/components/ui/Button.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
@@ -161,21 +162,20 @@ watch(() => props.id, fetchData, { immediate: true })
                 </div>
               </div>
               <div class="actions">
-                <button class="ui deny button">
+                <Button color="secondary">
                   {{ t('components.library.ArtistBase.button.cancel') }}
-                </button>
+                </Button>
               </div>
             </semantic-modal>
             <div class="ui buttons">
               <Popover>
                 <template #default="{ toggleOpen }">
-                  <button
+                  <Button
-                    class="ui button"
                     @click="toggleOpen"
+                    icon="caret-down-fill"
                   >
                     {{ t('components.library.ArtistBase.button.more') }}
-                    <i class="dropdown icon" />
+                  </Button>
-                  </button>
                 </template>
 
                 <template #items>

front/src/components/library/Artists.vue

@@ -17,6 +17,7 @@ import $ from 'jquery'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -142,13 +143,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
                 name="search"
                 :placeholder="labels.searchPlaceholder"
               >
-              <button
+              <Button
-                class="ui icon button"
                 type="submit"
+                icon="bi-search"
                 :aria-label="t('components.library.Artists.button.search')"
               >
-                <i class="search icon" />
+              </Button>
-              </button>
             </div>
           </div>
           <div class="field">

front/src/components/library/FsBrowser.vue

@@ -4,6 +4,8 @@ import type { FileSystem, FSEntry } from '~/types'
 import { useVModel } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
+import Button from '~/components/ui/Button.vue'
+
 
 interface Events {
   (e: 'update:modelValue', value: string[]): void
@@ -42,12 +44,12 @@ const handleClick = (entry: FSEntry) => {
         disabled
         :value="props.data.root + '/' + value.join('/')"
       >
-      <button
+      <Button
         class="ui button"
         @click.prevent="emit('import')"
       >
         {{ t('components.library.FsBrowser.button.import') }}
-      </button>
+      </Button>
     </div>
     <div class="ui list component-fs-browser">
       <a

front/src/components/library/ImportStatusModal.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Upload } from '~/types'
-
-import SemanticModal from '~/components/semantic/Modal.vue'
 import { useVModel } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
+import SemanticModal from '~/components/semantic/Modal.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface ErrorEntry {
   key: string
   value: string
@@ -183,9 +184,9 @@ const getErrorData = (upload: Upload) => {
       </div>
     </div>
     <div class="actions">
-      <button class="ui deny button">
+      <Button color="secondary">
         {{ t('components.library.ImportStatusModal.button.close') }}
-      </button>
+      </Button>
     </div>
   </semantic-modal>
 </template>

front/src/components/library/Podcasts.vue

@@ -3,8 +3,6 @@ import type { OrderingProps } from '~/composables/navigation/useOrdering'
 import type { Artist, BackendResponse } from '~/types'
 import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
-import Popover from "~/components/ui/Popover.vue"
-import PopoverItem from "~/components/ui/popover/PopoverItem.vue"
 
 import { computed, ref, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
@@ -20,6 +18,9 @@ import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import Modal from '~/components/ui/Modal.vue'
 import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import Popover from "~/components/ui/Popover.vue"
+import PopoverItem from "~/components/ui/popover/PopoverItem.vue"
+import Button from '~/components/ui/Button.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -143,13 +144,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
                 name="search"
                 :placeholder="labels.searchPlaceholder"
               >
-              <button
+              <Button
-                class="ui icon button"
+                icon="bi-search"
                 type="submit"
                 :aria-label="t('components.library.Podcasts.button.search')"
               >
-                <i class="search icon" />
+              </Button>
-              </button>
             </div>
           </div>
           <div class="field">
@@ -275,17 +275,16 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         />
       </div>
       <div class="actions">
-        <button class="ui basic deny button">
+        <Button color="secondary">
           {{ t('components.library.Podcasts.button.cancel') }}
-        </button>
+        </Button>
-        <button
+        <Button
           form="remote-search"
           type="submit"
-          class="ui primary button"
         >
           <i class="bookmark icon" />
           {{ t('components.library.Podcasts.button.subscribe') }}
-        </button>
+        </Button>
       </div>
     </Modal>
   </main>

front/src/components/library/Radios.vue

@@ -176,13 +176,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
                 name="search"
                 :placeholder="labels.searchPlaceholder"
               >
-              <button
+              <Button
-                class="ui icon button"
+                icon="bi-search"
                 type="submit"
                 :aria-label="t('components.library.Radios.button.search')"
               >
-                <i class="search icon" />
+              </Button>
-              </button>
             </div>
           </div>
           <div class="field">

front/src/components/library/TrackBase.vue

@@ -18,6 +18,7 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 import Button from '~/components/ui/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
+import Button from '~/components/ui/Button.vue'
 
 import updateQueryString from '~/composables/updateQueryString'
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -191,9 +192,9 @@ const open = ref(false)
                   </div>
                 </div>
                 <div class="actions">
-                  <button class="ui basic deny button">
+                  <Button color="secondary">
                     {{ t('components.library.TrackBase.button.cancel') }}
-                  </button>
+                  </Button>
                 </div>
               </semantic-modal>
               <Popover v-model:open="open">

front/src/components/library/radios/Filter.vue

@@ -14,6 +14,7 @@ import { clone } from 'lodash-es'
 
 import SemanticModal from '~/components/semantic/Modal.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -197,9 +198,9 @@ fetchCandidates()
           </div>
         </div>
         <div class="actions">
-          <button class="ui deny button">
+          <Button color="secondary">
             {{ t('components.library.radios.Filter.cancelButton') }}
-          </button>
+          </Button>
         </div>
       </semantic-modal>
     </td>

front/src/components/manage/library/UploadsTable.vue

@@ -14,6 +14,7 @@ import axios from 'axios'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -334,13 +335,13 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             >
               {{ getImportStatusChoice(scope.obj.import_status).label }}
             </a>
-            <button
+            <Button
-              class="ui tiny basic icon button"
+              class="tiny"
+              icon="bi-question-circle"
               :title="sharedLabels.fields.import_status.label"
               @click="detailedUpload = scope.obj; showUploadDetailModal = true"
             >
-              <i class="question circle outline icon" />
+            </Button>
-            </button>
           </td>
           <td>
             <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>

front/src/components/manage/moderation/InstancePolicyModal.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
 import SemanticModal from '~/components/semantic/Modal.vue'
+import Button from '~/components/ui/Button.vue'
 
 interface Props {
   target: string
@@ -59,8 +60,7 @@ const fetchData = async () => {
 </script>
 
 <template>
-  <button
+  <Button
-    class="ui button"
     @click.prevent="show = !show"
   >
     <i class="shield icon" />&nbsp;
@@ -105,10 +105,10 @@ const fetchData = async () => {
         <div class="ui hidden divider" />
       </div>
       <div class="actions">
-        <button class="ui deny button">
+        <Button color="secondary">
           {{ t('components.manage.moderation.InstancePolicyModal.button.close') }}
-        </button>
+        </Button>
       </div>
     </semantic-modal>
-  </button>
+  </Button>
 </template>

front/src/components/playlists/Widget.vue

@@ -11,6 +11,7 @@ import axios from 'axios'
 import useErrorHandler from '~/composables/useErrorHandler'
 
 import PlaylistCard from '~/components/playlists/Card.vue'
+import Button from '~/components/ui/Button.vue'
 
 interface Props {
   filters: Record<string, unknown>
@@ -84,24 +85,22 @@ watch(
         <i class="list icon" />
         {{ t('components.playlists.Widget.placeholder.noPlaylists') }}
       </div>
-      <button
+      <Button
         v-if="store.state.auth.authenticated"
-        class="ui success icon labeled button"
+        icon="bi-card-list"
         @click="store.commit('playlists/chooseTrack', null)"
       >
-        <i class="list icon" />
         {{ t('components.playlists.Widget.button.create') }}
-      </button>
+      </Button>
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <Button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
         @click="fetchData(nextPage)"
       >
         {{ t('components.playlists.Widget.button.more') }}
-      </button>
+      </Button>
     </template>
   </div>
 </template>

front/src/components/semantic/Modal.vue

@@ -1,26 +1,15 @@
 <script setup lang="ts">
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { ref } from 'vue'
-import { computed, onBeforeUnmount, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
-import { useVModel } from '@vueuse/core'
 import { useStore } from '~/store'
 import Modal from '~/components/ui/Modal.vue'
 
-interface Events {
-  (e: 'update:show', show: boolean): void
-  (e: 'approved'): void
-  (e: 'deny'): void
-  (e: 'show'): void
-  (e: 'hide'): void
-}
-
 interface Props {
-  show: boolean
   fullscreen?: boolean
   scrolling?: boolean
   additionalClasses?: string[]
 }
 
-const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   fullscreen: true,
   scrolling: false,
@@ -34,20 +23,17 @@ const classes = computed(() => [
     'overlay fullscreen': props.fullscreen && ['phone', 'tablet'].includes(store.getters['ui/windowSize'])
   }
 ])
+
+const isOpen = ref(false)
+
 </script>
 
 <template>
-  <!-- TODO: Replace this file with `components/ui/Modal` -->
+  <Modal <!-- :isOpen="props.show" -->
-  <!-- <Modal
+  title="props.title"
-    :model-value="show"
+  :class="classes"
-    @update:model-value="(value) => emit('update:show', value)"
-    :class="classes"
-    @approve="emit('approved')"
-    @deny="emit('deny')"
-    @show="emit('show')"
-    @hide="emit('hide')"
-
   >
-    <slot />
+    <template v-if="$slots.actions" #actions>
+    </template>
   </Modal> -->
 </template>

front/src/views/Search.vue

@@ -17,6 +17,7 @@ import Pagination from '~/components/vui/Pagination.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import TagsList from '~/components/tags/List.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
@@ -260,13 +261,12 @@ const radioConfig = computed(() => {
                     name="query"
                     type="text"
                   >
-                  <button
+                  <Button
                     :aria-label="labels.submitSearch"
                     type="submit"
-                    class="ui icon button"
+                    icon="bi-search"
                   >
-                    <i class="search icon" />
+                  </Button>
-                  </button>
                 </div>
               </div>
             </form>

front/src/views/channels/SubscriptionsList.vue

@@ -9,6 +9,7 @@ import axios from 'axios'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import SemanticModal from '~/components/semantic/Modal.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -91,17 +92,16 @@ const showSubscribeModal = ref(false)
           />
         </div>
         <div class="actions">
-          <button class="ui basic deny button">
+          <Button color="secondary">
             {{ t('views.channels.SubscriptionsList.button.cancel') }}
-          </button>
+          </Button>
-          <button
+          <Button
             form="remote-search"
             type="submit"
-            class="ui primary button"
+            icon="bi-bookmark-check-fill"
           >
-            <i class="bookmark icon" />
             {{ t('views.channels.SubscriptionsList.button.subscribe') }}
-          </button>
+          </Button>
         </div>
       </semantic-modal>
 

front/src/views/playlists/List.vue

@@ -16,6 +16,7 @@ import $ from 'jquery'
 
 import PlaylistCardList from '~/components/playlists/CardList.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -114,12 +115,11 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         {{ t('views.playlists.List.header.browse') }}
       </h2>
       <template v-if="store.state.auth.authenticated">
-        <button
+        <Button
-          class="ui success button"
           @click="store.commit('playlists/showModal', true)"
         >
           {{ t('views.playlists.List.button.manage') }}
-        </button>
+        </Button>
         <div class="ui hidden divider" />
       </template>
       <form
@@ -137,13 +137,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
                 name="search"
                 :placeholder="labels.searchPlaceholder"
               >
-              <button
+              <Button
-                class="ui icon button"
                 type="submit"
+                icon="bi-search"
                 :aria-label="t('views.playlists.List.button.search')"
               >
                 <i class="search icon" />
-              </button>
+              </Button>
             </div>
           </div>
           <div class="field">
@@ -209,14 +209,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           <i class="list icon" />
           {{ t('views.playlists.List.empty.noResults') }}
         </div>
-        <button
+        <Button
           v-if="store.state.auth.authenticated"
-          class="ui success button labeled icon"
+          icon="bi-list"
           @click="store.commit('playlists/showModal', true)"
         >
-          <i class="list icon" />
           {{ t('views.playlists.List.button.create') }}
-        </button>
+        </Button>
       </div>
       <div class="ui center aligned basic segment">
         <pagination