除了重複的區塊可以抽成元件外，最小的組成單元常見就是按鈕，它有很多不同的狀態，透過抽離成獨立元件，能確保整體介面的一致性與邏輯可維護性。

常見的基礎元件包含：

• button 按鈕
• input 輸入框
• dropdown 下拉選單
• radio button 單選
• checkbox 多選
• alert 回應訊息

這些元件通常會被統一建立在專案的基礎層，供各個頁面或父元件重複使用。

其中 input 輸入框也可以被延伸成很多種輸入型態，像是一般文字、數字格式、日期格式、多行文字，也可以分門別類的在有使用到時建立成元件。

在技術實作上，可以直接使用 Vuetify 的原生元件，再依照需求調整樣式，套用自定義的 CIS 或 class，以維持設計風格的一致性

參考文件： https://vuetifyjs.com/en/components/buttons/#global-configuration

Button 元件設計

// components/form/button.vue

<template>
     <v-btn
        :append-icon="hasIcon && props.appendIcon"
        rounded="xl" 
        size="large" 
        :class="props.class"
        :variant="props.type"
        @click="onClick()"
			>
        {{ props.btnName }}
    </v-btn>
</template>

<script setup> 
// 父元件傳進來的
const props = defineProps({
    type: {             // 實心按鈕 or 外框按鈕
        type: String,
        default: '',
        required: true
    },
    class: {            // 樣式調整
        type: String,
        default: '',
        required: true
    },
    btnName: {          // 按鈕文字
        type: String,
        default: '',
        required: true,
    },
    hasIcon: {          // 有無置放icon
        type: Boolean,
        default: false,
        required: false,
    },
    appendIcon: {       // icon 圖
        type: String,
        default: 'mdi-arrow-right',
        required: false,
    },
});

// 傳回給父元件
const emit = defineEmits(['click']);

function onClick() {
  emit('click');
}
</script>

在 Vuetify 裡，color 屬性其實不是單純套用文字顏色，它會依照主題 (theme) 與元件預設樣式 去控制背景、文字、hover 狀態等整套色彩方案。

所以當你在 <v-btn color="white"> 這樣寫時，它會：

• 把按鈕背景設成 white
• 自動幫你算對比色

因此，如果你只是單純想改變「文字顏色」並且使用在 app.scss 設定的顏色，必須要用 class的方式傳入（如下）：

<v-btn class="bg-orange text-white">
  聯絡我
</v-btn>

接著就把之前所有有用到 v-btn 的地方，置換成 CustomButton 樣式，就可以了～