diff --git a/src/resources/js/bootstrap.js b/src/resources/js/bootstrap.js
--- a/src/resources/js/bootstrap.js
+++ b/src/resources/js/bootstrap.js
@@ -20,12 +20,16 @@
 import FontAwesomeIcon from './fontawesome'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import Btn from '../vue/Widgets/Btn'
+import BtnRouter from '../vue/Widgets/BtnRouter'
 import Toast from '../vue/Widgets/Toast'
 import store from './store'
 
 window.Vue = Vue
 
 Vue.component('SvgIcon', FontAwesomeIcon)
+Vue.component('Btn', Btn)
+Vue.component('BtnRouter', BtnRouter)
 
 const vTooltip = (el, binding) => {
     let t = []
diff --git a/src/resources/vue/Admin/Domain.vue b/src/resources/vue/Admin/Domain.vue
--- a/src/resources/vue/Admin/Domain.vue
+++ b/src/resources/vue/Admin/Domain.vue
@@ -25,12 +25,12 @@
                         </div>
                     </form>
                     <div class="mt-2 buttons">
-                        <button v-if="!domain.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendDomain">
+                        <btn v-if="!domain.isSuspended" id="button-suspend" class="btn-warning" @click="suspendDomain">
                             {{ $t('btn.suspend') }}
-                        </button>
-                        <button v-if="domain.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendDomain">
+                        </btn>
+                        <btn v-if="domain.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendDomain">
                             {{ $t('btn.unsuspend') }}
-                        </button>
+                        </btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
--- a/src/resources/vue/Admin/User.vue
+++ b/src/resources/vue/Admin/User.vue
@@ -58,7 +58,7 @@
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="external_email">
                                     <a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
-                                    <button type="button" class="btn btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</button>
+                                    <btn class="btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</btn>
                                 </span>
                             </div>
                         </div>
@@ -76,12 +76,12 @@
                         </div>
                     </form>
                     <div class="mt-2 buttons">
-                        <button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">
+                        <btn v-if="!user.isSuspended" id="button-suspend" class="btn-warning" @click="suspendUser">
                             {{ $t('btn.suspend') }}
-                        </button>
-                        <button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">
+                        </btn>
+                        <btn v-if="user.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendUser">
                             {{ $t('btn.unsuspend') }}
-                        </button>
+                        </btn>
                     </div>
                 </div>
             </div>
@@ -147,7 +147,7 @@
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="discount">
                                         <span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
-                                        <button type="button" class="btn btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</button>
+                                        <btn class="btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</btn>
                                     </span>
                                 </div>
                             </div>
@@ -173,8 +173,8 @@
                             </div>
                         </form>
                         <div class="mt-2 buttons">
-                            <button id="button-award" class="btn btn-success" type="button" @click="awardDialog">{{ $t('user.add-bonus') }}</button>
-                            <button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">{{ $t('user.add-penalty') }}</button>
+                            <btn id="button-award" class="btn-success" @click="awardDialog">{{ $t('user.add-bonus') }}</btn>
+                            <btn id="button-penalty" class="btn-danger" @click="penalizeDialog">{{ $t('user.add-penalty') }}</btn>
                         </div>
                     </div>
                     <h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2>
@@ -231,12 +231,8 @@
                             &sup1; {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
                         </small>
                         <div class="mt-2 buttons">
-                            <button type="button" class="btn btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">
-                                {{ $t('user.reset-2fa') }}
-                            </button>
-                            <button type="button" class="btn btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">
-                                {{ $t('user.add-beta') }}
-                            </button>
+                            <btn class="btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">{{ $t('user.reset-2fa') }}</btn>
+                            <btn class="btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">{{ $t('user.add-beta') }}</btn>
                         </div>
                     </div>
                 </div>
@@ -408,7 +404,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.discount-title') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>
@@ -419,10 +415,8 @@
                         </p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-primary modal-action" @click="submitDiscount()">
-                            <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
-                        </button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-primary modal-action" @click="submitDiscount()" icon="check">{{ $t('btn.submit') }}</btn>
                     </div>
                 </div>
             </div>
@@ -433,7 +427,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.ext-email') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>
@@ -441,10 +435,8 @@
                         </p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-primary modal-action" @click="submitEmail()">
-                            <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
-                        </button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-primary modal-action" @click="submitEmail()" icon="check">{{ $t('btn.submit') }}</btn>
                     </div>
                 </div>
             </div>
@@ -455,7 +447,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form data-validation-prefix="oneoff_">
@@ -473,10 +465,8 @@
                         </form>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-primary modal-action" @click="submitOneOff()">
-                            <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
-                        </button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-primary modal-action" @click="submitOneOff()" icon="check">{{ $t('btn.submit') }}</btn>
                     </div>
                 </div>
             </div>
@@ -487,15 +477,15 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.reset-2fa-title') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('user.2fa-hint1') }}</p>
                         <p>{{ $t('user.2fa-hint2') }}</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/Distlist/Info.vue b/src/resources/vue/Distlist/Info.vue
--- a/src/resources/vue/Distlist/Info.vue
+++ b/src/resources/vue/Distlist/Info.vue
@@ -6,9 +6,7 @@
             <div class="card-body">
                 <div class="card-title" v-if="list_id !== 'new'">
                     {{ $tc('distlist.list-title', 1) }}
-                    <button class="btn btn-outline-danger button-delete float-end" @click="deleteList()" tag="button">
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('distlist.delete') }}
-                    </button>
+                    <btn class="btn-outline-danger button-delete float-end" @click="deleteList()" icon="trash-alt">{{ $t('distlist.delete') }}</btn>
                 </div>
                 <div class="card-title" v-if="list_id === 'new'">{{ $t('distlist.new') }}</div>
                 <div class="card-text">
@@ -51,7 +49,7 @@
                                         <list-input id="members" :list="list.members"></list-input>
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
@@ -65,7 +63,7 @@
                                         </small>
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
diff --git a/src/resources/vue/Distlist/List.vue b/src/resources/vue/Distlist/List.vue
--- a/src/resources/vue/Distlist/List.vue
+++ b/src/resources/vue/Distlist/List.vue
@@ -5,9 +5,9 @@
                 <div class="card-title">
                     {{ $tc('distlist.list-title', 2) }}
                     <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
-                    <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-list" :to="{ path: 'distlist/new' }" tag="button">
-                        <svg-icon icon="users"></svg-icon> {{ $t('distlist.create') }}
-                    </router-link>
+                    <btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="distlist/new" icon="users">
+                        {{ $t('distlist.create') }}
+                    </btn-router>
                 </div>
                 <div class="card-text">
                     <table class="table table-sm table-hover">
diff --git a/src/resources/vue/Domain/Info.vue b/src/resources/vue/Domain/Info.vue
--- a/src/resources/vue/Domain/Info.vue
+++ b/src/resources/vue/Domain/Info.vue
@@ -6,12 +6,7 @@
             <div class="card-body">
                 <div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div>
                 <div class="card-title" v-else>{{ $t('form.domain') }}
-                    <button
-                        class="btn btn-outline-danger button-delete float-end"
-                        @click="showDeleteConfirmation()" type="button"
-                    >
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('domain.delete') }}
-                    </button>
+                    <btn class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()" icon="trash-alt">{{ $t('domain.delete') }}</btn>
                 </div>
                 <div class="card-text">
                     <ul class="nav nav-tabs mt-3" role="tablist">
@@ -49,9 +44,7 @@
                                     <label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
                                     <subscription-select v-if="domain.id" class="col-sm-8 pt-sm-1" type="domain" :object="domain" :readonly="true"></subscription-select>
                                 </div>
-                                <button v-if="!domain.id" class="btn btn-primary mt-3" type="submit">
-                                    <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
-                                </button>
+                                <btn v-if="!domain.id" class="btn-primary mt-3" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                             <hr class="m-0" v-if="domain.id">
                             <div v-if="domain.id && !domain.isConfirmed" class="card-body" id="domain-verify">
@@ -67,7 +60,7 @@
                                         <span>{{ $t('domain.verify-outro') }}</span>
                                     </p>
                                     <p>{{ $t('domain.verify-sample') }} <pre>{{ domain.dns.join("\n") }}</pre></p>
-                                    <button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.verify') }}</button>
+                                    <btn class="btn-primary" @click="confirm" icon="sync-alt">{{ $t('btn.verify') }}</btn>
                                 </div>
                             </div>
                             <div v-if="domain.isConfirmed" class="card-body" id="domain-config">
@@ -92,7 +85,7 @@
                                             </small>
                                         </div>
                                     </div>
-                                    <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
+                                    <btn class="btn-primary" type="submit" icon="check">{{ $t('form.submit') }}</btn>
                                 </form>
                             </div>
                         </div>
@@ -105,16 +98,14 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('domain.delete-domain', { domain: domain.namespace }) }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('domain.delete-text') }}</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-danger modal-action" @click="deleteDomain()">
-                            <svg-icon icon="trash-alt"></svg-icon> {{ $t('btn.delete') }}
-                        </button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-danger modal-action" @click="deleteDomain()" icon="trash-alt">{{ $t('btn.delete') }}</btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/Domain/List.vue b/src/resources/vue/Domain/List.vue
--- a/src/resources/vue/Domain/List.vue
+++ b/src/resources/vue/Domain/List.vue
@@ -4,16 +4,15 @@
             <div class="card-body">
                 <div class="card-title">
                     {{ $t('user.domains') }}
-                    <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-domain" :to="{ path: 'domain/new' }" tag="button">
-                        <svg-icon icon="globe"></svg-icon> {{ $t('domain.create') }}
-                    </router-link>
+                    <btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="domain/new" icon="globe">
+                        {{ $t('domain.create') }}
+                    </btn-router>
                 </div>
                 <div class="card-text">
                     <table class="table table-sm table-hover">
                         <thead>
                             <tr>
                                 <th scope="col">{{ $t('domain.namespace') }}</th>
-                                <th scope="col"></th>
                             </tr>
                         </thead>
                         <tbody>
@@ -22,12 +21,11 @@
                                     <svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
                                     <router-link :to="{ path: 'domain/' + domain.id }">{{ domain.namespace }}</router-link>
                                 </td>
-                                <td class="buttons"></td>
                             </tr>
                         </tbody>
                         <tfoot class="table-fake-body">
                             <tr>
-                                <td colspan="2">{{ $t('user.domains-none') }}</td>
+                                <td>{{ $t('user.domains-none') }}</td>
                             </tr>
                         </tfoot>
                     </table>
diff --git a/src/resources/vue/Login.vue b/src/resources/vue/Login.vue
--- a/src/resources/vue/Login.vue
+++ b/src/resources/vue/Login.vue
@@ -28,9 +28,7 @@
                             <small class="text-muted mt-2">{{ $t('login.2fa_desc') }}</small>
                         </div>
                         <div class="text-center">
-                            <button class="btn btn-primary" type="submit">
-                                <svg-icon icon="sign-in-alt"></svg-icon> {{ $t('login.sign_in') }}
-                            </button>
+                            <btn class="btn-primary" type="submit" icon="sign-in-alt">{{ $t('login.sign_in') }}</btn>
                         </div>
                     </form>
                 </div>
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -126,13 +126,13 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('meet.leave-body') }}</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
+                        <btn class="btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
                     </div>
                 </div>
             </div>
@@ -143,7 +143,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form class="media-setup-form">
@@ -169,7 +169,7 @@
                         </form>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
+                        <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/Meet/RoomOptions.vue b/src/resources/vue/Meet/RoomOptions.vue
--- a/src/resources/vue/Meet/RoomOptions.vue
+++ b/src/resources/vue/Meet/RoomOptions.vue
@@ -5,7 +5,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('meet.options') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form id="room-options-password">
@@ -14,9 +14,9 @@
                                 <span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span>
                                 <span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span>
                                 <input type="text" :value="config.password" name="password" class="form-control rounded-start activable">
-                                <button type="button" @click="passwordSave" id="password-save-btn" class="btn btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</button>
-                                <button type="button" v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn btn-outline-danger rounded">{{ $t('meet.password-clear') }}</button>
-                                <button type="button" v-else @click="passwordSet" id="password-set-btn" class="btn btn-outline-primary rounded">{{ $t('meet.password-set') }}</button>
+                                <btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn>
+                                <btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn>
+                                <btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn>
                             </div>
                             <small class="text-muted">
                                 {{ $t('meet.password-text') }}
@@ -44,7 +44,7 @@
                         </form>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
+                        <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/PasswordReset.vue b/src/resources/vue/PasswordReset.vue
--- a/src/resources/vue/PasswordReset.vue
+++ b/src/resources/vue/PasswordReset.vue
@@ -12,7 +12,7 @@
                         <label for="reset_email" class="visually-hidden">{{ $t('form.email') }}</label>
                         <input type="text" class="form-control" id="reset_email" :placeholder="$t('form.email')" required v-model="email">
                     </div>
-                    <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
+                    <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                 </form>
             </div>
         </div>
@@ -28,8 +28,8 @@
                         <label for="reset_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
                         <input type="text" class="form-control" id="reset_short_code" :placeholder="$t('form.code')" required v-model="short_code">
                     </div>
-                    <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
-                    <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
+                    <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
+                    <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                     <input type="hidden" id="reset_code" v-model="code" />
                 </form>
             </div>
@@ -52,8 +52,8 @@
                         </div>
                         <small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
                     </div>
-                    <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
-                    <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                    <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
+                    <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                 </form>
             </div>
         </div>
diff --git a/src/resources/vue/Reseller/Invitations.vue b/src/resources/vue/Reseller/Invitations.vue
--- a/src/resources/vue/Reseller/Invitations.vue
+++ b/src/resources/vue/Reseller/Invitations.vue
@@ -8,11 +8,7 @@
                 <div class="card-text">
                     <div class="mb-2 d-flex">
                         <list-search :placeholder="$t('invitation.search')" :on-search="searchInvitations"></list-search>
-                        <div>
-                            <button class="btn btn-success create-invite ms-1" @click="inviteUserDialog">
-                                <svg-icon icon="envelope-open-text"></svg-icon> {{ $t('invitation.create') }}
-                            </button>
-                        </div>
+                        <btn class="btn-success create-invite ms-1" @click="inviteUserDialog" icon="envelope-open-text">{{ $t('invitation.create') }}</btn>
                     </div>
 
                     <table id="invitations-list" class="table table-sm table-hover">
@@ -33,14 +29,12 @@
                                     {{ inv.created }}
                                 </td>
                                 <td class="buttons">
-                                    <button class="btn text-danger button-delete p-0 ms-1" @click="deleteInvite(inv.id)">
-                                        <svg-icon icon="trash-alt"></svg-icon>
+                                    <btn class="text-danger button-delete p-0 ms-1" @click="deleteInvite(inv.id)" icon="trash-alt">
                                         <span class="btn-label">{{ $t('btn.delete') }}</span>
-                                    </button>
-                                    <button class="btn button-resend p-0 ms-1" :disabled="inv.isNew || inv.isCompleted" @click="resendInvite(inv.id)">
-                                        <svg-icon icon="redo"></svg-icon>
+                                    </btn>
+                                    <btn class="button-resend p-0 ms-1" :disabled="inv.isNew || inv.isCompleted" @click="resendInvite(inv.id)" icon="redo">
                                         <span class="btn-label">{{ $t('btn.resend') }}</span>
-                                    </button>
+                                    </btn>
                                 </td>
                             </tr>
                         </tbody>
@@ -56,7 +50,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('invitation.create-title') }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <form>
@@ -72,10 +66,8 @@
                         </form>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-primary modal-action" @click="inviteUser()">
-                            <svg-icon icon="paper-plane"></svg-icon> {{ $t('invitation.send') }}
-                        </button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-primary modal-action" icon="paper-plane" @click="inviteUser()">{{ $t('invitation.send') }}</btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/Resource/Info.vue b/src/resources/vue/Resource/Info.vue
--- a/src/resources/vue/Resource/Info.vue
+++ b/src/resources/vue/Resource/Info.vue
@@ -6,9 +6,7 @@
             <div class="card-body">
                 <div class="card-title" v-if="resource_id !== 'new'">
                     {{ $tc('resource.list-title', 1) }}
-                    <button class="btn btn-outline-danger button-delete float-end" @click="deleteResource()" tag="button">
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('resource.delete') }}
-                    </button>
+                    <btn class="btn-outline-danger button-delete float-end" @click="deleteResource()" icon="trash-alt">{{ $t('resource.delete') }}</btn>
                 </div>
                 <div class="card-title" v-if="resource_id === 'new'">{{ $t('resource.new') }}</div>
                 <div class="card-text">
@@ -53,7 +51,7 @@
                                         <input type="text" class="form-control" id="email" disabled v-model="resource.email">
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
@@ -74,7 +72,7 @@
                                         </small>
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
diff --git a/src/resources/vue/Resource/List.vue b/src/resources/vue/Resource/List.vue
--- a/src/resources/vue/Resource/List.vue
+++ b/src/resources/vue/Resource/List.vue
@@ -5,9 +5,9 @@
                 <div class="card-title">
                     {{ $tc('resource.list-title', 2) }}
                     <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
-                    <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-resource" :to="{ path: 'resource/new' }" tag="button">
-                        <svg-icon icon="cog"></svg-icon> {{ $t('resource.create') }}
-                    </router-link>
+                    <btn-router v-if="!$root.isDegraded()" to="resource/new" class="btn-success float-end" icon="cog">
+                        {{ $t('resource.create') }}
+                    </btn-router>
                 </div>
                 <div class="card-text">
                     <table class="table table-sm table-hover">
diff --git a/src/resources/vue/Settings.vue b/src/resources/vue/Settings.vue
--- a/src/resources/vue/Settings.vue
+++ b/src/resources/vue/Settings.vue
@@ -19,7 +19,7 @@
                                 </ul>
                             </div>
                         </div>
-                        <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                        <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                     </form>
                 </div>
             </div>
diff --git a/src/resources/vue/SharedFolder/Info.vue b/src/resources/vue/SharedFolder/Info.vue
--- a/src/resources/vue/SharedFolder/Info.vue
+++ b/src/resources/vue/SharedFolder/Info.vue
@@ -6,9 +6,7 @@
             <div class="card-body">
                 <div class="card-title" v-if="folder_id !== 'new'">
                     {{ $tc('shf.list-title', 1) }}
-                    <button class="btn btn-outline-danger button-delete float-end" @click="deleteFolder()" tag="button">
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('shf.delete') }}
-                    </button>
+                    <btn class="btn-outline-danger button-delete float-end" @click="deleteFolder()" icon="trash-alt">{{ $t('shf.delete') }}</btn>
                 </div>
                 <div class="card-title" v-if="folder_id === 'new'">{{ $t('shf.new') }}</div>
                 <div class="card-text">
@@ -61,7 +59,7 @@
                                         <input type="text" class="form-control" id="email" disabled v-model="folder.email">
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
@@ -75,7 +73,7 @@
                                         </small>
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
diff --git a/src/resources/vue/SharedFolder/List.vue b/src/resources/vue/SharedFolder/List.vue
--- a/src/resources/vue/SharedFolder/List.vue
+++ b/src/resources/vue/SharedFolder/List.vue
@@ -5,9 +5,9 @@
                 <div class="card-title">
                     {{ $tc('shf.list-title', 2) }}
                     <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
-                    <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-folder" :to="{ path: 'shared-folder/new' }" tag="button">
-                        <svg-icon icon="cog"></svg-icon> {{ $t('shf.create') }}
-                    </router-link>
+                    <btn-router v-if="!$root.isDegraded()" to="shared-folder/new" class="btn-success float-end" icon="cog">
+                        {{ $t('shf.create') }}
+                    </btn-router>
                 </div>
                 <div class="card-text">
                     <table class="table table-sm table-hover">
diff --git a/src/resources/vue/Signup.vue b/src/resources/vue/Signup.vue
--- a/src/resources/vue/Signup.vue
+++ b/src/resources/vue/Signup.vue
@@ -10,7 +10,7 @@
                             </div>
                         </div>
                         <div class="card-body text-center">
-                            <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button>
+                            <btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn>
                             <div class="plan-description text-start mt-3" v-html="item.description"></div>
                         </div>
                     </div>
@@ -35,8 +35,8 @@
                         <label for="signup_email" class="visually-hidden">{{ $t('signup.email') }}</label>
                         <input type="text" class="form-control" id="signup_email" :placeholder="$t('signup.email')" required v-model="email">
                     </div>
-                    <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
-                    <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
+                    <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
+                    <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                 </form>
             </div>
         </div>
@@ -52,8 +52,8 @@
                         <label for="signup_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
                         <input type="text" class="form-control" id="signup_short_code" :placeholder="$t('form.code')" required v-model="short_code">
                     </div>
-                    <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
-                    <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
+                    <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
+                    <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
                     <input type="hidden" id="signup_code" v-model="code" />
                 </form>
             </div>
@@ -88,10 +88,11 @@
                         <label for="signup_voucher" class="visually-hidden">{{ $t('signup.voucher') }}</label>
                         <input type="text" class="form-control" id="signup_voucher" :placeholder="$t('signup.voucher')" v-model="voucher">
                     </div>
-                    <button v-if="!invitation" class="btn btn-secondary me-2" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
-                    <button class="btn btn-primary" type="submit">
-                        <svg-icon icon="check"></svg-icon> <span v-if="invitation">{{ $t('btn.signup') }}</span><span v-else>{{ $t('btn.submit') }}</span>
-                    </button>
+                    <btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn>
+                    <btn class="btn-primary" type="submit" icon="check">
+                        <span v-if="invitation">{{ $t('btn.signup') }}</span>
+                        <span v-else>{{ $t('btn.submit') }}</span>
+                    </btn>
                 </form>
             </div>
         </div>
diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
--- a/src/resources/vue/User/Info.vue
+++ b/src/resources/vue/User/Info.vue
@@ -5,12 +5,9 @@
         <div class="card" id="user-info">
             <div class="card-body">
                 <div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }}
-                    <button
-                        class="btn btn-outline-danger button-delete float-end"
-                        @click="showDeleteConfirmation()" type="button"
-                    >
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.delete') }}
-                    </button>
+                    <btn icon="trash-alt" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()">
+                        {{ $t('user.delete') }}
+                    </btn>
                 </div>
                 <div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div>
                 <div class="card-text">
@@ -78,12 +75,8 @@
                                         <div id="password-link" v-if="passwordMode == 'link' || user.passwordLinkCode" class="mt-2">
                                             <span>{{ $t('user.pass-link-label') }}</span>&nbsp;<code>{{ passwordLink }}</code>
                                             <span class="d-inline-block">
-                                                <button class="btn btn-link p-1" type="button" :title="$t('btn.copy')" @click="passwordLinkCopy">
-                                                    <svg-icon :icon="['far', 'clipboard']"></svg-icon>
-                                                </button>
-                                                <button v-if="user.passwordLinkCode" class="btn btn-link text-danger p-1" type="button" :title="$t('btn.delete')" @click="passwordLinkDelete">
-                                                    <svg-icon icon="trash-alt"></svg-icon>
-                                                </button>
+                                                <btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="passwordLinkCopy"></btn>
+                                                <btn v-if="user.passwordLinkCode" class="btn-link text-danger p-1" icon="trash-alt" :title="$t('btn.delete')" @click="passwordLinkDelete"></btn>
                                             </span>
                                         </div>
                                     </div>
@@ -96,7 +89,7 @@
                                     <label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
                                     <subscription-select v-if="user.id" class="col-sm-8 pt-sm-1" :object="user"></subscription-select>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                         <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
@@ -110,7 +103,7 @@
                                         </small>
                                     </div>
                                 </div>
-                                <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                                <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                             </form>
                         </div>
                     </div>
@@ -122,16 +115,14 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('user.delete-text') }}</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-danger modal-action" @click="deleteUser()">
-                            <svg-icon icon="trash-alt"></svg-icon> {{ $t('btn.delete') }}
-                        </button>
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-danger modal-action" icon="trash-alt" @click="deleteUser()">{{ $t('btn.delete') }}</btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/User/List.vue b/src/resources/vue/User/List.vue
--- a/src/resources/vue/User/List.vue
+++ b/src/resources/vue/User/List.vue
@@ -8,11 +8,9 @@
                 <div class="card-text">
                     <div class="mb-2 d-flex">
                         <list-search :placeholder="$t('user.search')" :on-search="searchUsers"></list-search>
-                        <div v-if="!$root.isDegraded()">
-                            <router-link class="btn btn-success ms-1 create-user" :to="{ path: 'user/new' }" tag="button">
-                                <svg-icon icon="user"></svg-icon> {{ $t('user.create') }}
-                            </router-link>
-                        </div>
+                        <btn-router v-if="!$root.isDegraded()" to="user/new" class="btn-success ms-1" icon="user">
+                            {{ $t('user.create') }}
+                        </btn-router>
                     </div>
                     <table id="users-list" class="table table-sm table-hover">
                         <thead>
diff --git a/src/resources/vue/User/Profile.vue b/src/resources/vue/User/Profile.vue
--- a/src/resources/vue/User/Profile.vue
+++ b/src/resources/vue/User/Profile.vue
@@ -4,13 +4,9 @@
             <div class="card-body">
                 <div class="card-title">
                     {{ $t('user.profile-title') }}
-                    <router-link
-                        v-if="$root.isController(wallet.id)"
-                        class="btn btn-outline-danger button-delete float-end"
-                        to="/profile/delete" tag="button"
-                    >
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.profile-delete') }}
-                    </router-link>
+                    <btn-router v-if="$root.isController(wallet.id)" to="profile/delete" class="btn-outline-danger float-end" icon="trash-alt">
+                        {{ $t('user.profile-delete') }}
+                    </btn-router>
                 </div>
                 <div class="card-text">
                     <form @submit.prevent="submit">
@@ -69,7 +65,7 @@
                             <label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label>
                             <password-input class="col-sm-8" v-model="profile"></password-input>
                         </div>
-                        <button class="btn btn-primary button-submit mt-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                        <btn class="btn-primary button-submit mt-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
                     </form>
                 </div>
             </div>
diff --git a/src/resources/vue/User/ProfileDelete.vue b/src/resources/vue/User/ProfileDelete.vue
--- a/src/resources/vue/User/ProfileDelete.vue
+++ b/src/resources/vue/User/ProfileDelete.vue
@@ -8,10 +8,10 @@
                     <p>{{ $t('user.profile-delete-text2') }}</p>
                     <p v-if="supportEmail" v-html="$t('user.profile-delete-support', { href: 'mailto:' + supportEmail, email: supportEmail })"></p>
                     <p>{{ $t('user.profile-delete-contact', { app: $root.appName }) }}</p>
-                    <button class="btn btn-secondary button-cancel" @click="$router.go(-1)">{{ $t('btn.cancel') }}</button>
-                    <button class="btn btn-danger button-delete" @click="deleteProfile">
-                        <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.profile-delete') }}
-                    </button>
+                    <p class="buttons">
+                        <btn class="btn-secondary button-cancel" @click="$router.go(-1)">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-danger button-delete" @click="deleteProfile" icon="trash-alt">{{ $t('user.profile-delete') }}</btn>
+                    </p>
                 </div>
             </div>
         </div>
diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
--- a/src/resources/vue/Wallet.vue
+++ b/src/resources/vue/Wallet.vue
@@ -10,16 +10,16 @@
                         {{ $t('wallet.pending-payments-warning') }}
                     </div>
                     <p>
-                        <button type="button" class="btn btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</button>
+                        <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn>
                     </p>
                     <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
                         <template v-if="mandate.id && !mandate.isValid">
                             <div class="alert alert-danger">
                                 {{ $t('wallet.auto-payment-failed') }}
                             </div>
-                            <button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button>
+                            <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
                         </template>
-                        <button type="button" class="btn btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</button>
+                        <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn>
                     </div>
                     <div id="mandate-info" v-else>
                         <div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
@@ -33,8 +33,8 @@
                             {{ $t('wallet.auto-payment-inprogress') }}
                         </div>
                         <p class="buttons">
-                            <button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button>
-                            <button type="button" class="btn btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</button>
+                            <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
+                            <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn>
                         </p>
                     </div>
                 </div>
@@ -69,9 +69,7 @@
                             <select id="receipt-id" class="form-control">
                                 <option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
                             </select>
-                            <button type="button" class="btn btn-secondary" @click="receiptDownload">
-                                <svg-icon icon="download"></svg-icon> {{ $t('btn.download') }}
-                            </button>
+                            <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn>
                         </div>
                         <p v-if="!receipts.length">
                             {{ $t('wallet.receipts-none') }}
@@ -96,7 +94,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ paymentDialogTitle }}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                        <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <div id="payment-method" v-if="paymentForm == 'method'">
@@ -163,25 +161,22 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                        <button type="button" class="btn btn-primary modal-action"
-                                v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)"
-                                @click="autoPayment"
+                        <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                        <btn class="btn-primary modal-action" icon="check" @click="autoPayment"
+                             v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)"
                         >
-                            <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
-                        </button>
-                        <button type="button" class="btn btn-primary modal-action"
-                                v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
-                                @click="autoPayment"
+                            {{ $t('btn.submit') }}
+                        </btn>
+                        <btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
+                             v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
                         >
-                            <svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}
-                        </button>
-                        <button type="button" class="btn btn-primary modal-action"
-                                v-if="paymentForm == 'manual'"
-                                @click="payment"
+                            {{ $t('btn.continue') }}
+                        </btn>
+                        <btn class="btn-primary modal-action" icon="check" @click="payment"
+                             v-if="paymentForm == 'manual'"
                         >
-                            <svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}
-                        </button>
+                            {{ $t('btn.continue') }}
+                        </btn>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/vue/Widgets/Btn.vue b/src/resources/vue/Widgets/Btn.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/Widgets/Btn.vue
@@ -0,0 +1,14 @@
+<template>
+    <button class="btn" :type="type" @click="$emit('click', $event)">
+        <svg-icon v-if="icon" :icon="icon"></svg-icon> <slot></slot>
+    </button>
+</template>
+
+<script>
+    export default {
+        props: {
+            type: { type: String, default: 'button' },
+            icon: { type: [ Array, String ], default: '' },
+        }
+    }
+</script>
diff --git a/src/resources/vue/Widgets/BtnRouter.vue b/src/resources/vue/Widgets/BtnRouter.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/Widgets/BtnRouter.vue
@@ -0,0 +1,23 @@
+<template>
+    <router-link :to="to" custom v-slot="{ navigate }">
+        <btn :class="className()" :icon="icon" @click="navigate">
+            <slot></slot>
+        </btn>
+    </router-link>
+</template>
+
+<script>
+    export default {
+        props: {
+            to: { type: [ Object, String ], default: () => {} },
+            icon: { type: [ Array, String ], default: '' },
+        },
+        methods: {
+            className() {
+                let label = this.to.length ? this.to : this.to.name
+
+                return ['btn', label.replace('/', '-')]
+            }
+        }
+    }
+</script>
diff --git a/src/resources/vue/Widgets/PackageSelect.vue b/src/resources/vue/Widgets/PackageSelect.vue
--- a/src/resources/vue/Widgets/PackageSelect.vue
+++ b/src/resources/vue/Widgets/PackageSelect.vue
@@ -26,10 +26,9 @@
                         {{ $root.priceLabel(pkg.cost, discount, currency) }}
                     </td>
                     <td class="buttons">
-                        <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="pkg.description">
-                            <svg-icon icon="info-circle"></svg-icon>
+                        <btn v-if="pkg.description" class="btn-link btn-lg p-0" v-tooltip="pkg.description" icon="info-circle">
                             <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
-                        </button>
+                        </btn>
                     </td>
                 </tr>
             </tbody>
diff --git a/src/resources/vue/Widgets/Status.vue b/src/resources/vue/Widgets/Status.vue
--- a/src/resources/vue/Widgets/Status.vue
+++ b/src/resources/vue/Widgets/Status.vue
@@ -8,9 +8,9 @@
                 <br>
                 <span id="refresh-text" v-if="refresh">{{ $t('status.prepare-refresh') }}</span>
             </p>
-            <button v-if="refresh" id="status-refresh" href="#" class="btn btn-secondary" @click="statusRefresh">
-                <svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.refresh') }}
-            </button>
+            <btn v-if="refresh" id="status-refresh" href="#" class="btn-secondary" @click="statusRefresh" icon="sync-alt">
+                {{ $t('btn.refresh') }}
+            </btn>
         </div>
         <div v-else class="d-flex align-items-start">
             <p id="status-body" class="flex-grow-1">
@@ -19,9 +19,9 @@
                 {{ $t('status.verify') }}
             </p>
             <div v-if="scope == 'domain'">
-                <button id="status-verify" class="btn btn-secondary text-nowrap" @click="confirmDomain">
-                    <svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.verify') }}
-                </button>
+                <btn id="status-verify" class="btn-secondary text-nowrap" @click="confirmDomain" icon="sync-alt">
+                    {{ $t('btn.verify') }}
+                </btn>
             </div>
             <div v-else-if="state.link && scope != 'domain'">
                 <router-link id="status-link" class="btn btn-secondary" :to="{ path: state.link }">{{ $t('status.verify-domain') }}</router-link>
diff --git a/src/resources/vue/Widgets/SubscriptionSelect.vue b/src/resources/vue/Widgets/SubscriptionSelect.vue
--- a/src/resources/vue/Widgets/SubscriptionSelect.vue
+++ b/src/resources/vue/Widgets/SubscriptionSelect.vue
@@ -34,10 +34,9 @@
                         {{ $root.priceLabel(sku.cost, discount, currency) }}
                     </td>
                     <td class="buttons">
-                        <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="sku.description">
-                            <svg-icon icon="info-circle"></svg-icon>
+                        <btn v-if="sku.description" class="btn-link btn-lg p-0" v-tooltip="sku.description" icon="info-circle">
                             <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
-                        </button>
+                        </btn>
                     </td>
                 </tr>
             </tbody>
diff --git a/src/resources/vue/Widgets/SupportForm.vue b/src/resources/vue/Widgets/SupportForm.vue
--- a/src/resources/vue/Widgets/SupportForm.vue
+++ b/src/resources/vue/Widgets/SupportForm.vue
@@ -4,36 +4,34 @@
             <form class="modal-content" @submit.prevent="submit">
                 <div class="modal-header">
                     <h5 class="modal-title">{{ $t('support.title') }}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
+                    <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                 </div>
                 <div class="modal-body">
-                    <form>
-                        <div class="mb-3">
-                            <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
-                            <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
-                            <small class="text-muted">{{ $t('support.id-hint') }}</small>
-                        </div>
-                        <div class="mb-3">
-                            <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
-                            <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
-                        </div>
-                        <div class="mb-3">
-                            <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
-                            <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
-                        </div>
-                        <div class="mb-3">
-                            <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
-                            <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
-                        </div>
-                        <div>
-                            <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
-                            <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
-                        </div>
-                    </form>
+                    <div class="mb-3">
+                        <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
+                        <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
+                        <small class="text-muted">{{ $t('support.id-hint') }}</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
+                        <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
+                    </div>
+                    <div class="mb-3">
+                        <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
+                        <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
+                    </div>
+                    <div class="mb-3">
+                        <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
+                        <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
+                    </div>
+                    <div>
+                        <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
+                        <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
+                    </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
-                    <button type="submit" class="btn btn-primary modal-action"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
+                    <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
+                    <btn type="submit" class="btn-primary modal-action" icon="check">{{ $t('btn.submit') }}</btn>
                 </div>
             </form>
         </div>
diff --git a/src/resources/vue/Widgets/ToastMessage.vue b/src/resources/vue/Widgets/ToastMessage.vue
--- a/src/resources/vue/Widgets/ToastMessage.vue
+++ b/src/resources/vue/Widgets/ToastMessage.vue
@@ -7,7 +7,7 @@
             <svg-icon icon="exclamation-circle" v-else-if="data.type == 'warning'"></svg-icon>
             <svg-icon :icon="data.icon" v-else-if="data.type == 'custom' && data.icon"></svg-icon>
             <strong>{{ data.title || $t('msg.' + data.type) }}</strong>
-            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></button>
+            <btn class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></btn>
         </div>
         <div v-if="data.body" v-html="data.body" class="toast-body"></div>
         <div v-else class="toast-body">{{ data.msg }}</div>
diff --git a/src/resources/vue/Widgets/TransactionLog.vue b/src/resources/vue/Widgets/TransactionLog.vue
--- a/src/resources/vue/Widgets/TransactionLog.vue
+++ b/src/resources/vue/Widgets/TransactionLog.vue
@@ -15,12 +15,10 @@
                     <td class="datetime">{{ transaction.createdAt }}</td>
                     <td class="email" v-if="isAdmin">{{ transaction.user }}</td>
                     <td class="selection">
-                        <button class="btn btn-lg btn-link btn-action" title="Details" type="button"
-                                v-if="transaction.hasDetails"
-                                @click="loadTransaction(transaction.id)"
-                        >
-                            <svg-icon icon="info-circle"></svg-icon>
-                        </button>
+                        <btn v-if="transaction.hasDetails" class="btn-lg btn-link btn-action" icon="info-circle"
+                             :title="$t('form.details')"
+                             @click="loadTransaction(transaction.id)"
+                        ></btn>
                     </td>
                     <td class="description">{{ description(transaction) }}</td>
                     <td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td>
diff --git a/src/resources/vue/Widgets/UserSearch.vue b/src/resources/vue/Widgets/UserSearch.vue
--- a/src/resources/vue/Widgets/UserSearch.vue
+++ b/src/resources/vue/Widgets/UserSearch.vue
@@ -4,7 +4,7 @@
             <form @submit.prevent="searchUser" class="row justify-content-center">
                 <div class="input-group col-sm-8">
                     <input class="form-control" type="text" :placeholder="$t('user.search-pl')" v-model="search">
-                    <button type="submit" class="btn btn-primary"><svg-icon icon="search"></svg-icon> {{ $t('btn.search') }}</button>
+                    <btn type="submit" class="btn-primary" icon="search">{{ $t('btn.search') }}</btn>
                 </div>
             </form>
             <table v-if="users.length" class="table table-sm table-hover mt-4">
diff --git a/src/tests/Browser/DegradedAccountTest.php b/src/tests/Browser/DegradedAccountTest.php
--- a/src/tests/Browser/DegradedAccountTest.php
+++ b/src/tests/Browser/DegradedAccountTest.php
@@ -76,31 +76,31 @@
                         ->assertVisible('tbody tr:nth-child(3) td:first-child svg.text-warning') // John
                         ->assertText('tbody tr:nth-child(3) td:first-child svg.text-warning title', 'Degraded');
                 })
-                ->assertMissing('button.create-user');
+                ->assertMissing('button.user-new');
 
             // Goto /domains and assert that the warning is also displayed there
             $browser->visit(new DomainList())
                 ->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
                 ->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
-                ->assertMissing('button.create-domain');
+                ->assertMissing('button.domain-new');
 
             // Goto /distlists and assert that the warning is also displayed there
             $browser->visit(new DistlistList())
                 ->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
                 ->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
-                ->assertMissing('button.create-list');
+                ->assertMissing('button.distlist-new');
 
             // Goto /resources and assert that the warning is also displayed there
             $browser->visit(new ResourceList())
                 ->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
                 ->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
-                ->assertMissing('button.create-resource');
+                ->assertMissing('button.resource-new');
 
             // Goto /shared-folders and assert that the warning is also displayed there
             $browser->visit(new SharedFolderList())
                 ->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
                 ->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
-                ->assertMissing('button.create-resource');
+                ->assertMissing('button.shared-folder-new');
 
             // Test that /rooms is not accessible
             $browser->visit('/rooms')
diff --git a/src/tests/Browser/DistlistTest.php b/src/tests/Browser/DistlistTest.php
--- a/src/tests/Browser/DistlistTest.php
+++ b/src/tests/Browser/DistlistTest.php
@@ -124,8 +124,8 @@
         $this->browse(function (Browser $browser) {
             // Create a group
             $browser->visit(new DistlistList())
-                ->assertSeeIn('button.create-list', 'Create list')
-                ->click('button.create-list')
+                ->assertSeeIn('button.distlist-new', 'Create list')
+                ->click('button.distlist-new')
                 ->on(new DistlistInfo())
                 ->assertSeeIn('#distlist-info .card-title', 'New distribution list')
                 ->assertSeeIn('@nav #tab-general', 'General')
diff --git a/src/tests/Browser/ResourceTest.php b/src/tests/Browser/ResourceTest.php
--- a/src/tests/Browser/ResourceTest.php
+++ b/src/tests/Browser/ResourceTest.php
@@ -125,8 +125,8 @@
         $this->browse(function (Browser $browser) {
             // Create a resource
             $browser->visit(new ResourceList())
-                ->assertSeeIn('button.create-resource', 'Create resource')
-                ->click('button.create-resource')
+                ->assertSeeIn('button.resource-new', 'Create resource')
+                ->click('button.resource-new')
                 ->on(new ResourceInfo())
                 ->assertSeeIn('#resource-info .card-title', 'New resource')
                 ->assertSeeIn('@nav #tab-general', 'General')
diff --git a/src/tests/Browser/SharedFolderTest.php b/src/tests/Browser/SharedFolderTest.php
--- a/src/tests/Browser/SharedFolderTest.php
+++ b/src/tests/Browser/SharedFolderTest.php
@@ -131,8 +131,8 @@
         $this->browse(function (Browser $browser) {
             // Create a folder
             $browser->visit(new SharedFolderList())
-                ->assertSeeIn('button.create-folder', 'Create folder')
-                ->click('button.create-folder')
+                ->assertSeeIn('button.shared-folder-new', 'Create folder')
+                ->click('button.shared-folder-new')
                 ->on(new SharedFolderInfo())
                 ->assertSeeIn('#folder-info .card-title', 'New shared folder')
                 ->assertSeeIn('@nav #tab-general', 'General')
diff --git a/src/tests/Browser/UserProfileTest.php b/src/tests/Browser/UserProfileTest.php
--- a/src/tests/Browser/UserProfileTest.php
+++ b/src/tests/Browser/UserProfileTest.php
@@ -72,7 +72,7 @@
                 ->assertSeeIn('@links .link-profile', 'Your profile')
                 ->click('@links .link-profile')
                 ->on(new UserProfile())
-                ->assertSeeIn('#user-profile .button-delete', 'Delete account')
+                ->assertSeeIn('#user-profile .profile-delete', 'Delete account')
                 ->whenAvailable('@form', function (Browser $browser) {
                     $user = User::where('email', 'john@kolab.org')->first();
                     // Assert form content
@@ -165,7 +165,7 @@
                 ->assertSeeIn('@links .link-profile', 'Your profile')
                 ->click('@links .link-profile')
                 ->on(new UserProfile())
-                ->assertMissing('#user-profile .button-delete')
+                ->assertMissing('#user-profile .profile-delete')
                 ->whenAvailable('@form', function (Browser $browser) {
                     // TODO: decide on what fields the non-controller user should be able
                     //       to see/change
@@ -202,7 +202,7 @@
                 ->assertSeeIn('@links .link-profile', 'Your profile')
                 ->click('@links .link-profile')
                 ->on(new UserProfile())
-                ->click('#user-profile .button-delete')
+                ->click('#user-profile .profile-delete')
                 ->waitForLocation('/profile/delete')
                 ->assertSeeIn('#user-delete .card-title', 'Delete this account?')
                 ->assertSeeIn('#user-delete .button-cancel', 'Cancel')
@@ -213,7 +213,7 @@
                 ->on(new UserProfile());
 
             // Test deleting the user
-            $browser->click('#user-profile .button-delete')
+            $browser->click('#user-profile .profile-delete')
                 ->waitForLocation('/profile/delete')
                 ->click('#user-delete .button-delete')
                 ->waitForLocation('/login')
diff --git a/src/tests/Browser/UsersTest.php b/src/tests/Browser/UsersTest.php
--- a/src/tests/Browser/UsersTest.php
+++ b/src/tests/Browser/UsersTest.php
@@ -405,8 +405,8 @@
 
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
-                ->assertSeeIn('button.create-user', 'Create user')
-                ->click('button.create-user')
+                ->assertSeeIn('button.user-new', 'Create user')
+                ->click('button.user-new')
                 ->on(new UserInfo())
                 ->assertSeeIn('#user-info .card-title', 'New user account')
                 ->with('@general', function (Browser $browser) {
@@ -660,7 +660,7 @@
         // Packages on new user page
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
-                ->click('button.create-user')
+                ->click('button.user-new')
                 ->on(new UserInfo())
                 ->with('@general', function (Browser $browser) {
                     $browser->whenAvailable('@packages', function (Browser $browser) {
@@ -768,7 +768,7 @@
         // Packages on new user page
         $this->browse(function (Browser $browser) {
             $browser->visit(new UserList())
-                ->click('button.create-user')
+                ->click('button.user-new')
                 ->on(new UserInfo())
                 ->with('@general', function (Browser $browser) {
                     $browser->whenAvailable('@packages', function (Browser $browser) {