Button

所有可點擊的觸發點都用這一組。文字按鈕用 AtomButton，只有圖示的用 AtomButtonIcon，標示分類用 AtomButtonTag。

文字按鈕

AtomButton

components/Atom/Button/Button.vue

用 slot 放內容，也可以只傳 text。帶入 href 會自動改渲染成 NuxtLink，不需要自己包一層連結。

即時調整參數

樣式 intent

尺寸 size

圓角 rounded

停用 disabled

<AtomButton>
  按鈕文字
</AtomButton>

四種 intent

尺寸

搭配圖示

當作連結

停用狀態

名稱	型別	預設值	說明
`intent`	'primary' \| 'secondary' \| 'outline' \| 'link' \| 'tag'	'primary'	視覺樣式。tag 目前與 primary 同色，標籤請優先用 AtomButtonTag
`size`	'xs' \| 'sm' \| 'md' \| 'lg' \| 'link'	'md'	link 給 intent="link" 用，內距最小
`rounded`	'sm' \| 'md' \| 'lg' \| 'full'	'lg'	圓角
`position`	'center' \| 'start' \| 'end'	'center'	按鈕內容的水平對齊
`href`	String	''	有值且未 disabled 時改渲染成 NuxtLink，可再傳 target
`disabled`	Boolean	false	disabled 時 href 會被忽略，維持 <button>
`text`	String	'Button'	沒有 slot 內容時顯示的文字
`type`	'button' \| 'submit' \| 'reset'	'button'	渲染成連結時會被忽略
`title`	String	''	未指定時自動退回 text，再退回「按鈕」

Slot	Slot props	說明
`default`	—	按鈕內容。有 slot 時優先於 text prop

AtomButtonIcon

components/Atom/Button/Icon.vue

按鈕內只有一個 aria-hidden 的圖示，所以 label 一定要寫 —— 少了它，讀螢幕的人只會聽到「按鈕」，不知道按下去會發生什麼事。

圖示顏色跟著外層文字走（SVG 都是 currentColor），尺寸則由 size 決定，不需要另外下 class。

即時調整參數

樣式 intent

尺寸 size

圓角 rounded

停用 disabled

<AtomButtonIcon />

淺色底可用的 intent

深色底用 white 系列

尺寸

名稱	型別	預設值	說明
`icon`*	String	''	對應 assets/icons 的檔名，見 Icon 頁
`label`*	String	''	無障礙名稱。按鈕內只有 aria-hidden 的圖示，沒有 label 輔助技術只會讀到「按鈕」
`intent`	'trans' \| 'transWhite' \| 'transSecondary' \| 'white' \| 'black' \| 'outlinePrimary' \| 'outline' \| 'outlineGray'	'trans'	White 系列給深色底用
`size`	'sm' \| 'md' \| 'lg'	'md'	對應 size-9 / size-10 / size-12
`rounded`	'md' \| 'full'	'full'
`disabled`	Boolean	false
`href`	String	''	有值時渲染成 NuxtLink
`position`	'center' \| 'start' \| 'end'	'center'
`type`	'button' \| 'submit' \| 'reset'	'button'
`shadow`	String	'none'

* 為必填