Button 按鈕

按鈕用來觸發動作。

示範

基礎

提供 secondary、primary、info、success、warning、danger 與 ghost 等類型。

預設主要資訊成功警告危險隱身

<gk-button variant="secondary">預設</gk-button>
<gk-button variant="primary">主要</gk-button>
<gk-button variant="info">資訊</gk-button>
<gk-button variant="success">成功</gk-button>
<gk-button variant="warning">警告</gk-button>
<gk-button variant="danger">危險</gk-button>
<gk-button variant="ghost">隱身</gk-button>

次要樣式

次要樣式按鈕的填色比實心變體更淺。

預設主要資訊成功警告危險

<gk-button secondary>預設</gk-button>
<gk-button variant="primary" secondary>主要</gk-button>
<gk-button variant="info" secondary>資訊</gk-button>
<gk-button variant="success" secondary>成功</gk-button>
<gk-button variant="warning" secondary>警告</gk-button>
<gk-button variant="danger" secondary>危險</gk-button>

尺寸

尺寸可為 sm、md 與 lg。

小中大

<gk-button size="sm">小</gk-button>
<gk-button size="md">中</gk-button>
<gk-button size="lg">大</gk-button>

虛線

虛線按鈕使用虛線邊框樣式。

預設主要資訊成功警告危險

<gk-button dashed>預設</gk-button>
<gk-button variant="primary" dashed>主要</gk-button>
<gk-button variant="info" dashed>資訊</gk-button>
<gk-button variant="success" dashed>成功</gk-button>
<gk-button variant="warning" dashed>警告</gk-button>
<gk-button variant="danger" dashed>危險</gk-button>

文字樣式

文字樣式按鈕在懸停前沒有背景或邊框。

預設主要資訊成功警告危險

<gk-button text>預設</gk-button>
<gk-button variant="primary" text>主要</gk-button>
<gk-button variant="info" text>資訊</gk-button>
<gk-button variant="success" text>成功</gk-button>
<gk-button variant="warning" text>警告</gk-button>
<gk-button variant="danger" text>危險</gk-button>

Quaternary

quaternary 是安靜的透明按鈕（對齊 Naive quaternary），適合圖示或選單觸發器。

更多⋯

<gk-button quaternary>更多</gk-button>
<gk-button quaternary aria-label="更多操作">⋯</gk-button>

停用

按鈕可設為停用。

停用主要危險

<gk-button disabled>停用</gk-button>
<gk-button variant="primary" disabled>主要</gk-button>
<gk-button variant="danger" disabled>危險</gk-button>

載入中

按鈕可顯示載入狀態。

載入中主要資訊

<gk-button loading>載入中</gk-button>
<gk-button variant="primary" loading>主要</gk-button>
<gk-button variant="info" loading>資訊</gk-button>

Ghost

Ghost 按鈕為透明背景。

Ghost大型 Ghost

<gk-button variant="ghost">Ghost</gk-button>
<gk-button variant="ghost" size="lg">大型 Ghost</gk-button>

標籤／連結

透過 href 可把按鈕渲染成連結。

快速開始按鈕文件

<gk-button href="/zh-TW/guide/getting-started">快速開始</gk-button>
<gk-button variant="info" href="/zh-TW/components/button">按鈕文件</gk-button>

按鈕群組

使用 gk-button-group 將相關按鈕分組。

左中右Live aSufficientLife

<gk-button-group>
  <gk-button variant="secondary">左</gk-button>
  <gk-button variant="secondary">中</gk-button>
  <gk-button variant="secondary">右</gk-button>
</gk-button-group>
<gk-button-group>
  <gk-button variant="primary">Live a</gk-button>
  <gk-button variant="primary">Sufficient</gk-button>
  <gk-button variant="primary">Life</gk-button>
</gk-button-group>

互動場

自由組合屬性並即時預覽。

類型 secondaryprimaryinfosuccesswarningdangerghost尺寸 smmdlg 載入中 停用

按鈕

API

Button Props

Prop	型別	預設值
variant	'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'ghost'	'primary'
size	'sm' | 'md' | 'lg'	'md'
type	'button' | 'submit' | 'reset'	'button'
disabled	boolean	false
loading	boolean	false
secondary	boolean	false
dashed	boolean	false
text	boolean	false
quaternary	boolean	false
href	string	—

Button Slots

名稱	說明
default	按鈕文字內容

ButtonGroup

名稱	說明
default	分組的 gk-button 子元素

CSS Parts

Part	說明
base	可互動元素（button 或 a）
label	標籤容器
spinner	載入指示器