Button
對應 Figma「Button」元件頁(node `4:7837`):`Button-Basic / Variants` (`3030:85050`)、`Button-Text Link`(`8756:43600`),以及 E-3 選購說明頁的「Button Group」實際用法(`15883:195286`)。
Button — Hierarchy × Size × State(Icon=None, Fixed Width=False)
primary
l
m
s
xs
secondary
l
m
s
xs
ghost
l
m
s
xs
tertiary
l
m
s
xs
Button — Icon slot(Size=L, Primary)
Button — Fixed Width
`fixedWidth`:L/M/S 固定 140px、XS 固定 100px(對應 Figma 示範文案的量測結果)。
Button — as="a"(連結)
E-8 App 下載頁的 App Store/Google Play CTA 可用此變體(外部連結)。
ButtonTextLink — 4 variant(Underline × State)
Underline=always, Default
Underline=always, Hover & Active
Underline=on-hover, Default
Underline=on-hover, Hover & Active
disabled(擴充)
ButtonGroup — E-3 選購說明分頁 tab(真實鍵盤可操作範例)
對應 node `15883:195286`:3 個 `Button-Text Link` 並排,gap 28px, 點擊或 Tab/Enter 切換選中分頁(紅色底線)。
目前選中:選購說明