feat: change to icon-only

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -4,12 +4,14 @@ import FormAddress from 'src/components/02_personnel-management/FormAddress.vue'
 import EmployerFormBusiness from './EmployerFormBusiness.vue';
 import EmployerFormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
-import { EditButton } from 'src/components/button';
-import DeleteButton from 'src/components/button/DeleteButton.vue';
-import SaveButton from 'src/components/button/SaveButton.vue';
-import CancelButton from 'src/components/button/CancelButton.vue';
 import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAttachment from './EmployerFormAttachment.vue';
+import {
+  SaveButton,
+  EditButton,
+  CancelButton,
+  DeleteButton,
+} from 'components/button';
 
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
@@ -40,31 +42,31 @@ defineProps<{
   >
     {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
     <EditButton
+      icon-only
       v-if="readonly"
-      style="width: 5rem"
       @click="$emit('edit')"
       class="q-ml-auto"
       type="button"
       :disabled="actionDisabled"
     />
     <DeleteButton
+      icon-only
       v-if="readonly"
-      style="width: 5rem"
       @click="$emit('delete')"
       type="button"
       :disabled="actionDisabled"
     />
     <SaveButton
+      icon-only
       v-if="!readonly"
-      style="width: 5rem"
       @click="$emit('save')"
       class="q-ml-auto"
       type="submit"
       :disabled="actionDisabled"
     />
     <CancelButton
+      icon-only
       v-if="!readonly"
-      style="width: 5rem"
       @click="$emit('cancel')"
       type="button"
       :disabled="actionDisabled"