Button 按鈕

按鈕用於觸發一個即時操作。使用 Element Plus 的 el-button,本頁定義 Accuhit 產品中的使用準則。

設計準則

一個畫面(或一個區塊)只有一顆主要按鈕(type="primary"),代表最主要的下一步
次要操作用預設按鈕,再次要的用文字按鈕(text)
破壞性操作(刪除、停用)用 type="danger",且必須搭配二次確認
按鈕文字用動詞開頭、2–6 個字:「儲存」「建立標籤」「匯出報表」;避免「確定」「OK」這類看不出後果的字
成對出現時,主要按鈕在右,取消在左
按鈕之間的間距為 12px(Element Plus 內建,相鄰按鈕自動生效,不要再加 gap)
只有圖標、沒有文字的按鈕(圓形/方形圖標鈕)一定要補 aria-label

基本用法

主要 + 次要的標準組合:

語意類型

六種語意類型,按鈕顏色跟著語意走,不可為了視覺挑色:

樸素按鈕

plain 為淺色底,語意色仍在但視覺分量較輕,適合次要但需要帶顏色的操作:

圓角按鈕

round 讓外觀更柔和,常用於行銷頁的行動呼籲:

圓形圖標按鈕

circle + 圖標,適合工具列上的單一動作。務必補 aria-label:

圖標按鈕

圖標可放文字前或文字後,與文字間距 4px(gap-1);圖標大小跟著字級、顏色跟著文字色:

禁用狀態

條件未滿足時用 disabled 暫時不可點:

文字按鈕

text 最輕量,用於表格列、卡片內的次要操作;加 bg 讓點擊區域帶淺底更明顯:

連結按鈕

link 外觀像文字連結,但仍是按鈕行為(觸發操作,不是導頁)。要真的「連到某個頁面」請用 Link 連結元件:

載入中

送出後用 loading 鎖住按鈕,避免使用者重複點擊(轉圈圖標用 EP 內建):

尺寸

預設用 default;表格內、工具列用 small;行銷頁的行動呼籲可用 large:

按鈕組

el-button-group 把一組相關操作黏在一起,常用於分頁切換、檢視模式切換:

自訂顏色

color 可指定任意色,深淺與 hover 由 EP 自動計算。僅限特殊情境(如活動主視覺);一般 UI 請優先用語意類型:

自訂標籤

tag 把按鈕渲染成別的元素。需要「連到外部網址」時用 tag="a" 最語意正確:

Do / Don't

✅ Do	❌ Don't
一個區塊一顆 primary	整排都是 primary 按鈕
「刪除標籤」+ danger + 確認彈窗	「確定」直接執行刪除
主要按鈕在右、取消在左	順序隨機擺放
圖標鈕補 `aria-label`	只有圖標、螢幕報讀器讀不出
用語意類型挑色	用 `color` 隨意自訂顏色
用 `el-button`	用 div + Tailwind 自刻按鈕

給工程師

常用 props:type(primary/success/info/warning/danger)、plain、round、circle、text、bg、link、loading、disabled、size(large/default/small)、color(自訂色)、tag(改渲染元素)
圖標用 Font Awesome 6 的 <i> 放在按鈕內(非 EP 的 :icon prop),與文字間距 mr-1 / ml-1
el-button-group 包一組按鈕即成按鈕組
完整 API(props/events/slots)見 Element Plus Button 文件。本站規範優先於 EP 文件中的視覺建議。

Button 按鈕 ​

設計準則 ​

基本用法 ​

語意類型 ​

樸素按鈕 ​

圓角按鈕 ​

圓形圖標按鈕 ​

圖標按鈕 ​

禁用狀態 ​

文字按鈕 ​

連結按鈕 ​

載入中 ​

尺寸 ​

按鈕組 ​

自訂顏色 ​

自訂標籤 ​

Do / Don't ​

給工程師 ​