佈景主題

Button 按鈕 ​

概述 ​

按鈕用於觸發動作或事件，是最基本的互動元件。

互動範例 ​

試著操作下方按鈕：hover（滑鼠移入）、按下去（active）、用 Tab 鍵聚焦（focus）。

送出取消刪除
在新分頁預覽

尺寸 ​

小按鈕中按鈕大按鈕
在新分頁預覽

停用狀態 ​

停用按鈕停用次要
在新分頁預覽

連結按鈕 ​

當按鈕需要導航至其他頁面時，設定 href 會將按鈕渲染為 <a role="button">，保持按鈕外觀但具備連結行為。

前往 GOV.UK另開新分頁停用連結
在新分頁預覽

互動狀態展示 ​

按鈕的互動回饋參考 GOV.UK Design System 的設計手法，核心目標是不依賴顏色作為唯一的視覺指示。

Hover（懸停） ​

滑鼠移到按鈕上，背景色加深。即使是色覺障礙使用者，也能透過明暗變化感知狀態改變。

預設送出→ Hover送出

Active（按壓） ​

按下按鈕時，底部 inset shadow 消失，視覺上按鈕「扁下去」。這是不依賴色彩的物理回饋。

預設（有底部陰影）送出→ Active（陰影消失）送出

Focus（聚焦） ​

用 Tab 鍵導航時，按鈕外圍出現 3px 黃色 #fd0 focus ring，貼合圓角。

預設送出→ Focus送出

Disabled（停用） ​

透明度降至 50%，游標變為禁止符號。

預設停用

使用方式 ​

html
<!-- 一般按鈕 -->
<govtw-button>送出</govtw-button>
<govtw-button variant="secondary">取消</govtw-button>
<govtw-button variant="danger">刪除</govtw-button>

<!-- 連結按鈕（導航至其他頁面） -->
<govtw-button href="/next-step">開始申請</govtw-button>
<govtw-button href="https://example.com" target="_blank" rel="noreferrer noopener">外部連結</govtw-button>

屬性 ​

屬性型別預設值說明
variant'primary' | 'secondary' | 'danger''primary'按鈕樣式
size'sm' | 'md' | 'lg''md'按鈕大小
disabledbooleanfalse是否停用
hrefstring''連結網址，有值時渲染為 <a>
targetstring''連結目標（如 _blank）
relstring''連結關係（如 noreferrer noopener）

樣式變體 ​

Primary（主要按鈕） ​

用於頁面上最重要的動作，每個頁面區塊建議只有一個主要按鈕。

  • 背景色：--govtw-color-brand-primary
  • 文字色：--govtw-color-text-on-primary

Secondary（次要按鈕） ​

用於次要動作，可與主要按鈕搭配使用。

  • 邊框：--govtw-color-border-default
  • 文字色：--govtw-color-text-primary

Danger（危險按鈕） ​

用於刪除、移除等破壞性操作。

  • 背景色：--govtw-color-feedback-error
  • 文字色：--govtw-color-text-on-primary

無障礙 ​

  • 無 href 時使用語意化的 <button> 元素；有 href 時渲染為 <a role="button">
  • 確保鍵盤可操作（Enter 和 Space 皆可觸發）
  • 焦點狀態以黃色 focus ring 清晰標示，支援鍵盤導航
  • 互動回饋透過 inset shadow 消失傳達按壓感，不僅依靠色彩
  • 停用狀態使用 aria-disabled 而非移除元素
  • 連結按鈕停用時移除 href 並設定 tabindex="-1" 防止聚焦
  • 透明邊框確保 Windows 高對比模式下可見
  • 色彩對比度符合 WCAG 2.2 AA 標準（至少 4.5:1）

設計指引 ​

  • 按鈕文字應簡潔明確，描述動作（如「送出申請」而非「點擊這裡」）
  • 避免在同一區塊使用過多按鈕
  • 按鈕之間保持 --govtw-spacing-3 以上的間距
  • 危險按鈕不應只靠紅色傳達嚴重性，需搭配文字說明動作後果