refactor: improve button component styles (#7517)

#### What type of PR is this? /area ui /kind improvement /milestone 2.21.x #### What this PR does / why we need it: 1. Add ghost variant 2. Improve icon style 3. Refactoring css using scss functions #### Does this PR introduce a user-facing change? ```release-note None ```
2025-06-09 23:38:34 +08:00 · 2025-06-09 23:38:34 +08:00 · 204113bd87
parent 63d40d4d40
commit 204113bd87
33 changed files with 228 additions and 154 deletions
--- a/ui/console-src/modules/contents/attachments/AttachmentList.vue
+++ b/ui/console-src/modules/contents/attachments/AttachmentList.vue
@ -260,7 +260,7 @@ watch(
          @click="policyVisible = true"
        >
          <template #icon>
-            <IconDatabase2Line class="h-full w-full" />
+            <IconDatabase2Line />
          </template>
          {{ $t("core.attachment.actions.storage_policies") }}
        </VButton>
@ -270,7 +270,7 @@ watch(
          @click="uploadVisible = true"
        >
          <template #icon>
-            <IconUpload class="h-full w-full" />
+            <IconUpload />
          </template>
          {{ $t("core.common.buttons.upload") }}
        </VButton>
@ -475,7 +475,7 @@ watch(
                    @click="uploadVisible = true"
                  >
                    <template #icon>
-                      <IconUpload class="h-full w-full" />
+                      <IconUpload />
                    </template>
                    {{ $t("core.attachment.empty.actions.upload") }}
                  </VButton>
--- a/ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
@ -141,7 +141,7 @@ function getPolicyTemplateDisplayName(templateName: string) {
          <VDropdown>
            <VButton type="secondary">
              <template #icon>
-                <IconAddCircle class="h-full w-full" />
+                <IconAddCircle />
              </template>
              {{ $t("core.common.buttons.new") }}
            </VButton>
--- a/ui/console-src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
+++ b/ui/console-src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
@ -265,7 +265,7 @@ const viewType = useLocalStorage("attachment-selector-view-type", "grid");
    <div class="mb-5">
      <VButton @click="uploadVisible = true">
        <template #icon>
-          <IconUpload class="h-full w-full" />
+          <IconUpload />
        </template>
        {{ $t("core.common.buttons.upload") }}
      </VButton>
@ -286,7 +286,7 @@ const viewType = useLocalStorage("attachment-selector-view-type", "grid");
        </VButton>
        <VButton type="secondary" @click="uploadVisible = true">
          <template #icon>
-            <IconUpload class="h-full w-full" />
+            <IconUpload />
          </template>
          {{ $t("core.attachment.empty.actions.upload") }}
        </VButton>
--- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue
+++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
@ -382,7 +382,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
                </VButton>
                <VButton type="secondary" @click="replyModal = true">
                  <template #icon>
-                    <IconAddCircle class="h-full w-full" />
+                    <IconAddCircle />
                  </template>
                  {{ $t("core.comment.reply_empty.new") }}
                </VButton>
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@ -217,7 +217,7 @@ watch(
          type="secondary"
        >
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.common.buttons.new") }}
        </VButton>
--- a/ui/console-src/modules/contents/pages/SinglePageEditor.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageEditor.vue
@ -486,7 +486,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
          "
        >
          <template #icon>
-            <IconHistoryLine class="h-full w-full" />
+            <IconHistoryLine />
          </template>
          {{ $t("core.page_editor.actions.snapshots") }}
        </VButton>
@ -497,13 +497,13 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
          @click="handlePreview"
        >
          <template #icon>
-            <IconEye class="h-full w-full" />
+            <IconEye />
          </template>
          {{ $t("core.common.buttons.preview") }}
        </VButton>
        <VButton :loading="saving" size="sm" type="default" @click="handleSave">
          <template #icon>
-            <IconSave class="h-full w-full" />
+            <IconSave />
          </template>
          {{ $t("core.common.buttons.save") }}
        </VButton>
@ -514,7 +514,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
          @click="handleOpenSettingModal"
        >
          <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
          </template>
          {{ $t("core.common.buttons.setting") }}
        </VButton>
@ -524,7 +524,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
          @click="handlePublishClick"
        >
          <template #icon>
-            <IconSendPlaneFill class="h-full w-full" />
+            <IconSendPlaneFill />
          </template>
          {{ $t("core.common.buttons.publish") }}
        </VButton>
--- a/ui/console-src/modules/contents/pages/SinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageList.vue
@ -298,7 +298,7 @@ watch(selectedPageNames, (newValue) => {
          type="secondary"
        >
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.common.buttons.new") }}
        </VButton>
@ -436,7 +436,7 @@ watch(selectedPageNames, (newValue) => {
                type="secondary"
              >
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.common.buttons.new") }}
              </VButton>
--- a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
@ -468,6 +468,7 @@ const { handleGenerateSlug } = useSlugify(
          "
          :loading="publishCanceling"
          type="danger"
+          ghost
          @click="handleUnpublish()"
        >
          {{ $t("core.common.buttons.cancel_publish") }}
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@ -227,7 +227,7 @@ watch(
          type="secondary"
        >
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.common.buttons.new") }}
        </VButton>
--- a/ui/console-src/modules/contents/posts/PostEditor.vue
+++ b/ui/console-src/modules/contents/posts/PostEditor.vue
@ -522,7 +522,7 @@ useSlugify(
          "
        >
          <template #icon>
-            <IconHistoryLine class="h-full w-full" />
+            <IconHistoryLine />
          </template>
          {{ $t("core.post_editor.actions.snapshots") }}
        </VButton>
@ -533,13 +533,13 @@ useSlugify(
          @click="handlePreview"
        >
          <template #icon>
-            <IconEye class="h-full w-full" />
+            <IconEye />
          </template>
          {{ $t("core.common.buttons.preview") }}
        </VButton>
        <VButton :loading="saving" size="sm" type="default" @click="handleSave">
          <template #icon>
-            <IconSave class="h-full w-full" />
+            <IconSave />
          </template>
          {{ $t("core.common.buttons.save") }}
        </VButton>
@ -550,7 +550,7 @@ useSlugify(
          @click="handleOpenSettingModal"
        >
          <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
          </template>
          {{ $t("core.common.buttons.setting") }}
        </VButton>
@ -560,7 +560,7 @@ useSlugify(
          @click="handlePublishClick"
        >
          <template #icon>
-            <IconSendPlaneFill class="h-full w-full" />
+            <IconSendPlaneFill />
          </template>
          {{ $t("core.common.buttons.publish") }}
        </VButton>
--- a/ui/console-src/modules/contents/posts/PostList.vue
+++ b/ui/console-src/modules/contents/posts/PostList.vue
@ -404,7 +404,7 @@ watch(
          type="secondary"
        >
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.common.buttons.new") }}
        </VButton>
@ -583,7 +583,7 @@ watch(
                type="secondary"
              >
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.common.buttons.new") }}
              </VButton>
--- a/ui/console-src/modules/contents/posts/categories/CategoryList.vue
+++ b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
@ -74,7 +74,7 @@ async function handleUpdateInBatch() {
        @click="creationModal = true"
      >
        <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
@ -116,7 +116,7 @@ async function handleUpdateInBatch() {
                @click="creationModal = true"
              >
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.common.buttons.new") }}
              </VButton>
--- a/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
+++ b/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
@ -498,6 +498,7 @@ const showCancelPublishButton = computed(() => {
          v-if="showCancelPublishButton"
          :loading="publishCanceling"
          type="danger"
+          ghost
          @click="handleUnpublish()"
        >
          {{ $t("core.common.buttons.cancel_publish") }}
--- a/ui/console-src/modules/contents/posts/tags/TagList.vue
+++ b/ui/console-src/modules/contents/posts/tags/TagList.vue
@ -173,7 +173,7 @@ watch(selectedTagNames, (newVal) => {
        @click="editingModal = true"
      >
        <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
@ -274,7 +274,7 @@ watch(selectedTagNames, (newVal) => {
              </VButton>
              <VButton type="secondary" @click="editingModal = true">
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.common.buttons.new") }}
              </VButton>
--- a/ui/console-src/modules/dashboard/Dashboard.vue
+++ b/ui/console-src/modules/dashboard/Dashboard.vue
@ -43,7 +43,7 @@ provide<ComputedRef<DashboardWidgetDefinition[]>>(
        @click="$router.push({ name: 'DashboardDesigner' })"
      >
        <template #icon>
-          <IconSettings class="h-full w-full" />
+          <IconSettings />
        </template>
        {{ $t("core.dashboard.actions.setting") }}
      </VButton>
--- a/ui/console-src/modules/dashboard/DashboardDesigner.vue
+++ b/ui/console-src/modules/dashboard/DashboardDesigner.vue
@ -37,7 +37,6 @@ import {
 import type { GridLayout } from "vue-grid-layout";
 import { useI18n } from "vue-i18n";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
-import RiArrowGoBackLine from "~icons/ri/arrow-go-back-line";
 import RiBox3Line from "~icons/ri/box-3-line";
 import RiFileCopyLine from "~icons/ri/file-copy-line";
 import WidgetEditableItem from "./components/WidgetEditableItem.vue";
@ -339,16 +338,13 @@ function handleCopyFromLayout(breakpoint: string) {
      ></VTabbar>
    </div>
    <VSpace>
-      <VButton @click="handleBack">
-        <template #icon>
-          <RiArrowGoBackLine class="h-full w-full" />
-        </template>
+      <VButton ghost @click="handleBack">
        {{ $t("core.common.buttons.back") }}
      </VButton>
      <VDropdown>
        <VButton>
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.dashboard_designer.actions.add_widget") }}
        </VButton>
@ -396,7 +392,7 @@ function handleCopyFromLayout(breakpoint: string) {
        @click="handleSave"
      >
        <template #icon>
-          <IconSave class="h-full w-full" />
+          <IconSave />
        </template>
        {{ $t("core.common.buttons.save") }}
      </VButton>
--- a/ui/console-src/modules/interface/menus/Menus.vue
+++ b/ui/console-src/modules/interface/menus/Menus.vue
@ -298,7 +298,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
                    @click="menuItemEditingModal = true"
                  >
                    <template #icon>
-                      <IconAddCircle class="h-full w-full" />
+                      <IconAddCircle />
                    </template>
                    {{ $t("core.common.buttons.new") }}
                  </VButton>
--- a/ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
+++ b/ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue
@ -85,7 +85,7 @@ const handleOpenPreview = (theme: Theme) => {
              @click="activeTabId = 'local-upload'"
            >
              <template #icon>
-                <IconAddCircle class="h-full w-full" />
+                <IconAddCircle />
              </template>
              {{ $t("core.theme.common.buttons.install") }}
            </VButton>
--- a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue
@ -210,13 +210,13 @@ onMounted(() => {
          </VButton>
          <VButton type="default" size="sm" @click="previewModal = true">
            <template #icon>
-              <IconEye class="h-full w-full" />
+              <IconEye />
            </template>
            {{ $t("core.common.buttons.preview") }}
          </VButton>
          <VButton type="secondary" @click="themesModal = true">
            <template #icon>
-              <IconListSettings class="h-full w-full" />
+              <IconListSettings />
            </template>
            {{ $t("core.theme.actions.management") }}
          </VButton>
@ -237,7 +237,7 @@ onMounted(() => {
            </VButton>
            <VButton type="secondary" @click="themesModal = true">
              <template #icon>
-                <IconExchange class="h-full w-full" />
+                <IconExchange />
              </template>
              {{ $t("core.theme.empty.actions.switch") }}
            </VButton>
--- a/ui/console-src/modules/system/backup/Backups.vue
+++ b/ui/console-src/modules/system/backup/Backups.vue
@ -68,7 +68,7 @@ onMounted(async () => {
    <template #actions>
      <VButton type="secondary" @click="handleCreate">
        <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
        </template>
        {{ $t("core.backup.operations.create.button") }}
      </VButton>
--- a/ui/console-src/modules/system/overview/Overview.vue
+++ b/ui/console-src/modules/system/overview/Overview.vue
@ -200,7 +200,7 @@ const handleDownloadLogfile = () => {
    <template #actions>
      <VButton size="sm" @click="handleCopy">
        <template #icon>
-          <IconClipboardLine class="h-full w-full" />
+          <IconClipboardLine />
        </template>
        {{ $t("core.common.buttons.copy") }}
      </VButton>
--- a/ui/console-src/modules/system/plugins/PluginList.vue
+++ b/ui/console-src/modules/system/plugins/PluginList.vue
@ -169,7 +169,7 @@ onMounted(() => {
            @click="$router.push({ name: 'PluginExtensionPointSettings' })"
          >
            <template #icon>
-              <IconSettings class="h-full w-full" />
+              <IconSettings />
            </template>
            {{ $t("core.plugin.actions.extension-point-settings") }}
          </VButton>
@ -181,7 +181,7 @@ onMounted(() => {
          @click="pluginInstallationModalVisible = true"
        >
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.common.buttons.install") }}
        </VButton>
@ -314,7 +314,7 @@ onMounted(() => {
                @click="pluginInstallationModalVisible = true"
              >
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.plugin.empty.actions.install") }}
              </VButton>
--- a/ui/console-src/modules/system/plugins/components/entity-fields/ReloadField.vue
+++ b/ui/console-src/modules/system/plugins/components/entity-fields/ReloadField.vue
@ -38,7 +38,7 @@ function handleReloadWindow() {
 <template>
  <VButton v-if="needsReloadWindow" size="xs" @click="handleReloadWindow">
    <template #icon>
-      <IconInformation class="h-full w-full" />
+      <IconInformation />
    </template>
    {{ $t("core.plugin.operations.reload_window.button") }}
  </VButton>
--- a/ui/console-src/modules/system/roles/RoleList.vue
+++ b/ui/console-src/modules/system/roles/RoleList.vue
@ -216,7 +216,7 @@ const handleDelete = async (role: Role) => {
        @click="editingModal = true"
      >
        <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
--- a/ui/console-src/modules/system/users/UserList.vue
+++ b/ui/console-src/modules/system/users/UserList.vue
@ -198,14 +198,14 @@ function onCreationModalClose() {
          type="default"
        >
          <template #icon>
-            <IconShieldUser class="h-full w-full" />
+            <IconShieldUser />
          </template>
          {{ $t("core.user.actions.roles") }}
        </VButton>
        <HasPermission :permissions="['*']">
          <VButton :route="{ name: 'AuthProviders' }" size="sm" type="default">
            <template #icon>
-              <IconLockPasswordLine class="h-full w-full" />
+              <IconLockPasswordLine />
            </template>
            {{ $t("core.user.actions.identity_authentication") }}
          </VButton>
@ -216,7 +216,7 @@ function onCreationModalClose() {
          @click="creationModal = true"
        >
          <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
          </template>
          {{ $t("core.common.buttons.new") }}
        </VButton>
@ -326,7 +326,7 @@ function onCreationModalClose() {
                @click="creationModal = true"
              >
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.common.buttons.new") }}
              </VButton>
--- a/ui/packages/components/src/components/button/Button.vue
+++ b/ui/packages/components/src/components/button/Button.vue
@ -35,6 +35,7 @@
    </span>
  </button>
 </template>
+
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
@ -50,6 +51,7 @@ const props = withDefaults(
    disabled?: boolean;
    loading?: boolean;
    route?: RouteLocationRaw | undefined;
+    ghost?: boolean;
  }>(),
  {
    type: "default",
@ -59,6 +61,7 @@ const props = withDefaults(
    disabled: false,
    loading: false,
    route: undefined,
+    ghost: false,
  }
 );

@ -74,6 +77,7 @@ const classes = computed(() => {
    { "btn-circle": props.circle },
    { "btn-block": props.block },
    { "btn-loading": props.loading },
+    { "btn-ghost": props.ghost },
  ];
 });

@ -85,128 +89,199 @@ function handleClick() {
  emit("click");
 }
 </script>
+
 <style lang="scss">
+@use "sass:map";
+$btn-sizes: (
+  xs: (
+    height: theme("spacing.6"),
+    padding-x: theme("spacing.2"),
+    font-size: theme("fontSize.xs"),
+    icon-size: theme("spacing.3"),
+    icon-margin: theme("spacing.2"),
+  ),
+  sm: (
+    height: theme("spacing.7"),
+    padding-x: theme("spacing.3"),
+    font-size: theme("fontSize.xs"),
+    icon-size: theme("spacing.3"),
+    icon-margin: theme("spacing.2"),
+  ),
+  md: (
+    height: theme("spacing.9"),
+    padding-x: theme("spacing.4"),
+    font-size: theme("fontSize.sm"),
+    icon-size: theme("spacing.5"),
+    icon-margin: theme("spacing.3"),
+  ),
+  lg: (
+    height: theme("spacing.11"),
+    padding-x: theme("spacing.5"),
+    font-size: theme("fontSize.lg"),
+    icon-size: theme("spacing.5"),
+    icon-margin: theme("spacing.3"),
+  ),
+);
+
+$btn-themes: (
+  default: (
+    bg: transparent,
+    color: inherit,
+    border: 1px solid #d9d9d9,
+    hover-bg: theme("colors.gray.100"),
+    icon-color: theme("colors.secondary"),
+    ghost-color: inherit,
+    ghost-hover-bg: theme("colors.gray.100"),
+    ghost-icon-color: theme("colors.secondary"),
+  ),
+  primary: (
+    bg: theme("colors.primary"),
+    color: #fff,
+    border: none,
+    hover-bg: theme("colors.primary"),
+    icon-color: #fff,
+    ghost-color: theme("colors.primary"),
+    ghost-hover-bg: theme("colors.primary / 10%"),
+    ghost-icon-color: theme("colors.primary"),
+  ),
+  secondary: (
+    bg: theme("colors.secondary"),
+    color: #fff,
+    border: none,
+    hover-bg: theme("colors.secondary"),
+    icon-color: #fff,
+    ghost-color: theme("colors.secondary"),
+    ghost-hover-bg: theme("colors.secondary / 10%"),
+    ghost-icon-color: theme("colors.secondary"),
+  ),
+  danger: (
+    bg: theme("colors.danger"),
+    color: #fff,
+    border: none,
+    hover-bg: theme("colors.danger"),
+    icon-color: #fff,
+    ghost-color: theme("colors.danger"),
+    ghost-hover-bg: theme("colors.danger / 10%"),
+    ghost-icon-color: theme("colors.danger"),
+  ),
+);
+
 .btn {
-  @apply rounded-base
-  inline-flex
-  flex-shrink-0
-  cursor-pointer
-  select-none
-  flex-wrap
-  items-center
-  justify-center
-  transition-all
-  text-center
-  text-sm
-  no-underline
-  h-9
-  px-4
-  outline-0
-  border-none
-  appearance-none
-  align-middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  cursor: pointer;
+  user-select: none;
+  appearance: none;
+  border-radius: theme("borderRadius.base");
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  outline-width: 0;
+  border-style: none;
+  $md-config: map.get($btn-sizes, md);
+  height: map.get($md-config, height);
+  padding-left: map.get($md-config, padding-x);
+  padding-right: map.get($md-config, padding-x);
+  font-size: map.get($md-config, font-size);

  &:hover {
-    @apply opacity-90;
+    opacity: 0.9;
  }

  &:active {
-    @apply opacity-100;
+    opacity: 1;
  }

  &:disabled {
-    @apply opacity-50
-    cursor-not-allowed;
+    opacity: 0.5;
+    cursor: not-allowed;
  }
-}

-.btn-default {
-  border: 1px solid #d9d9d9;
+  &.btn-loading {
+    cursor: not-allowed;

-  &:hover {
-    @apply bg-gray-100;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.btn-block {
+    width: 100%;
  }

  .btn-icon {
-    @apply text-secondary;
+    height: map.get($md-config, icon-size);
+    width: map.get($md-config, icon-size);
+    margin-right: map.get($md-config, icon-margin);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    > * {
+      height: 100%;
+      width: 100%;
+    }
  }
 }

-.btn-primary {
-  @apply text-white bg-primary #{!important};
-}
+@each $size, $config in $btn-sizes {
+  .btn-#{$size} {
+    height: map.get($config, height);
+    padding-left: map.get($config, padding-x);
+    padding-right: map.get($config, padding-x);
+    font-size: map.get($config, font-size);

-.btn-secondary {
-  @apply text-white bg-secondary #{!important};
-}
+    .btn-icon {
+      height: map.get($config, icon-size);
+      width: map.get($config, icon-size);
+      margin-right: map.get($config, icon-margin);
+    }

-.btn-danger {
-  background-color: #d71d1d !important;
-  @apply text-white;
-}
-
-.btn-block {
-  @apply w-full;
-}
-
-.btn-icon {
-  @apply h-5 w-5
-  text-white
-  mr-3;
-}
-
-.btn-loading {
-  @apply cursor-not-allowed;
-  &:hover {
-    @apply opacity-100;
+    &.btn-circle {
+      width: map.get($config, height);
+      padding: 0;
+      border-radius: 9999px;
+    }
  }
 }

-.btn-lg {
-  @apply h-11
-  px-5
-  text-lg;
-}
+@each $theme, $config in $btn-themes {
+  .btn-#{$theme} {
+    background-color: map.get($config, bg) !important;
+    color: map.get($config, color);
+    border: map.get($config, border);

-.btn-sm {
-  @apply h-7
-  px-3
-  text-xs;
+    &:hover {
+      background-color: map.get($config, hover-bg) !important;
+    }

-  .btn-icon {
-    @apply h-3
-    w-3
-    mr-2;
+    .btn-icon {
+      color: map.get($config, icon-color);
+    }
  }
 }

-.btn-xs {
-  @apply h-6
-  px-2
-  text-xs;
+.btn-ghost {
+  background-color: transparent !important;

-  .btn-icon {
-    @apply h-3
-    w-3
-    mr-2;
+  @each $theme, $config in $btn-themes {
+    &.btn-#{$theme} {
+      color: map.get($config, ghost-color);
+      border: none;
+
+      &:hover {
+        background-color: map.get($config, ghost-hover-bg) !important;
+      }
+
+      .btn-icon {
+        color: map.get($config, ghost-icon-color);
+      }
+    }
  }
 }
-
-.btn-circle {
-  @apply w-9
-  p-0
-  rounded-full;
-}
-
-.btn-lg.btn-circle {
-  @apply w-11;
-}
-
-.btn-sm.btn-circle {
-  @apply w-7;
-}
-
-.btn-xs.btn-circle {
-  @apply w-6;
-}
 </style>
--- a/ui/src/formkit/inputs/list/AddButton.vue
+++ b/ui/src/formkit/inputs/list/AddButton.vue
@ -29,7 +29,7 @@ const handleAppendClick = () => {
  <div :class="context.classes.add" @click="handleAppendClick">
    <VButton :disabled="disabled" type="secondary">
      <template #icon>
-        <IconAddCircle class="h-full w-full" />
+        <IconAddCircle />
      </template>
      {{ context.addLabel || $t("core.common.buttons.add") }}
    </VButton>
--- a/ui/src/formkit/inputs/repeater/AddButton.vue
+++ b/ui/src/formkit/inputs/repeater/AddButton.vue
@ -29,7 +29,7 @@ const handleAppendClick = () => {
  <div :class="context.classes.add" @click="handleAppendClick">
    <VButton :disabled="disabled" type="secondary">
      <template #icon>
-        <IconAddCircle class="h-full w-full" />
+        <IconAddCircle />
      </template>
      {{ context.addLabel || $t("core.common.buttons.add") }}
    </VButton>
--- a/ui/tailwind.config.cjs
+++ b/ui/tailwind.config.cjs
@ -31,6 +31,7 @@ module.exports = {
          colors: {
            primary: "#4CCBA0",
            secondary: "#0E1731",
+            danger: "#D71D1D",
          },
          borderRadius: {
            base: "4px",
--- a/ui/uc-src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
+++ b/ui/uc-src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
@ -307,7 +307,7 @@ const handleSelectNext = async () => {
  <div v-if="data?.total" class="mb-5">
    <VButton @click="uploadVisible = true">
      <template #icon>
-        <IconUpload class="h-full w-full" />
+        <IconUpload />
      </template>
      {{ $t("core.common.buttons.upload") }}
    </VButton>
@ -327,7 +327,7 @@ const handleSelectNext = async () => {
        </VButton>
        <VButton type="secondary" @click="uploadVisible = true">
          <template #icon>
-            <IconUpload class="h-full w-full" />
+            <IconUpload />
          </template>
          {{ $t("core.uc_attachment.empty.actions.upload") }}
        </VButton>
--- a/ui/uc-src/modules/contents/posts/PostEditor.vue
+++ b/ui/uc-src/modules/contents/posts/PostEditor.vue
@ -484,7 +484,7 @@ useSlugify(
          @click="handleSaveClick"
        >
          <template #icon>
-            <IconSave class="h-full w-full" />
+            <IconSave />
          </template>
          {{ $t("core.common.buttons.save") }}
        </VButton>
@ -495,7 +495,7 @@ useSlugify(
          @click="handleOpenPostSettingEditModal"
        >
          <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
          </template>
          {{ $t("core.common.buttons.setting") }}
        </VButton>
@ -506,7 +506,7 @@ useSlugify(
            @click="handlePublishClick"
          >
            <template #icon>
-              <IconSendPlaneFill class="h-full w-full" />
+              <IconSendPlaneFill />
            </template>
            {{ $t("core.common.buttons.publish") }}
          </VButton>
--- a/ui/uc-src/modules/contents/posts/PostList.vue
+++ b/ui/uc-src/modules/contents/posts/PostList.vue
@ -109,7 +109,7 @@ const {
    <template #actions>
      <VButton :route="{ name: 'PostEditor' }" type="secondary">
        <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
        </template>
        {{ $t("core.common.buttons.new") }}
      </VButton>
@ -179,7 +179,7 @@ const {
                type="secondary"
              >
                <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                </template>
                {{ $t("core.common.buttons.new") }}
              </VButton>
--- a/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
+++ b/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
@ -39,7 +39,7 @@ const creationModal = ref(false);
  <div v-if="pats?.length" class="my-5 flex justify-end">
    <VButton type="secondary" @click="creationModal = true">
      <template #icon>
-        <IconAddCircle class="h-full w-full" />
+        <IconAddCircle />
      </template>
      {{ $t("core.common.buttons.new") }}
    </VButton>
@ -59,7 +59,7 @@ const creationModal = ref(false);
          </VButton>
          <VButton type="secondary" @click="creationModal = true">
            <template #icon>
-              <IconAddCircle class="h-full w-full" />
+              <IconAddCircle />
            </template>
            {{ $t("core.common.buttons.new") }}
          </VButton>