jws-frontend/src/components/ButtonAddCompoent.vue

<script setup lang="ts"></script>

<template>
  <q-page-sticky position="bottom-right" :offset="[8, 8]">
    <q-fab
      id="btn-add"
      padding="sm"
      icon="mdi-plus"
      direction="up"
      class="color-btn"
    >
      <slot>
        <q-fab-action padding="xs" color="primary" icon="mdi-account-plus" />
      </slot>
    </q-fab>
  </q-page-sticky>
</template>

<style scoped>
.color-btn {
  color: white;
  background: hsla(var(--blue-10-hsl) / 0.7);
}

:deep(.q-hoverable:hover) {
  background: hsla(var(--blue-10-hsl) / 1) !important;
}
</style>