按鈕

這是什麼

可調 variant、size、文案的 Button 示範；內建「程式碼」分頁與一鍵複製。

什麼時候用

需要複製即用 snippet 貼到專案時；先在預覽調參再複製。

這是什麼

同一畫面上的操作按鈕分成「主要」「次要」「文字」「危險」等樣式，讓使用者一眼知道哪個是這頁最重要的動作。常見於頁首操作列、表單底部、設定區的儲存列。

什麼時候用

一個畫面只留一個最醒目的主要按鈕（例如「儲存」）；其餘改成次要或文字按鈕。刪除、停用等危險動作要用紅色樣式，並與「取消」拉開距離，避免誤點。

這是什麼

使用者按下「儲存」「送出」後，按鈕會顯示處理中（例如轉圈＋「儲存中…」），表示系統正在處理、請稍候。

什麼時候用

任何會等伺服器回應的按鈕都應有載入狀態；處理期間按鈕要暫時無法再按，避免重複提交。按鈕寬度維持不變，畫面才不會跳動。

這是什麼

條件尚未滿足時，按鈕會變灰且無法點擊，並用提示文字說明「為什麼還不能按、要怎麼解鎖」。

什麼時候用

缺少必填、權限不足、尚未選取項目時用。不要只變灰而不解釋——使用者需要知道下一步該做什麼。

這是什麼

只有圖示、沒有文字的按鈕，用在表格列、工具列等空間很窄的地方（例如「更多」「刪除」）。

什麼時候用

圖示必須能讓人看懂意思（搭配滑鼠懸停說明）；點擊區域要夠大，手指或滑鼠都容易點到。若動作需要文字才清楚，就改用有文字的按鈕。

這是什麼

把幾個相關選項排成一排（例如「日／週／月」），讓使用者在同一組裡切換，而不必跳頁。

什麼時候用

選項彼此排斥、且都在改變同一塊內容時適合。次要或危險動作不要塞在群組裡，改放到「更多」選單。

這是什麼

左邊是常用動作（例如「儲存」），右邊小箭頭可展開其他變體（例如「另存草稿」）。

什麼時候用

有一個明顯的預設動作，但偶爾需要次要變體時使用。若每個選項都同等重要，改成分開的兩顆按鈕或選單較清楚。

這是什麼

確認視窗、表單彈窗底部那一排「取消／確定／刪除」按鈕的排列方式。

什麼時候用

「取消」放左、「確定」放右（繁中介面比照常見西方產品習慣）。有刪除等危險動作時，預設焦點應在「取消」，避免使用者一開窗就誤按刪除。

這是什麼

Linear：標題含資源名稱、三十天回收說明、取消與刪除危險按鈕。

什麼時候用

不可復原或高風險刪除前；標題與內文要寫清楚後果，預設焦點在取消。