CSS: button ​

.instui-button — 一個可存取的操作控制，從代幣調色盤取得樣式；預設為主要按鈕。

AI 變體為其框架圖層套用兩道漸層——一個 padding-box 填色和一個 border-box 描邊；而 -color-ai-secondary 無法同時繪製漸層文字與填色，故其預設中心保持透明，僅在懸停或按下時填滿。-without-background 在懸停與按下時產生低不透明度、略微變暗的品牌洗色，而非使用原始的懸停背景代幣（那樣會造成同色背景上同色文字不可見）。此外會設置自身的圖示/標籤 gap 與水平 padding；串接 -gap-*/-p-*/-padding-* 的間距工具修飾詞會覆寫這些內建值。可選的 .instui-button-group 包裝器對應 Figma 的 .buttonGroup 並管理相鄰按鈕的間距。

Source: button.css

無障礙 ​

以 aria-pressed 驅動 -toggle 變體的按下狀態，並以 aria-disabled（或原生的 disabled）標記停用按鈕。

使用方法 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/button.css";

示範 ​

範例 ​

html
<div class="instui-button-group">
  <button class="instui-button">Primary</button>
  <button class="instui-button -color-secondary">Secondary</button>
</div>

結構 ​

群組包裝器會使用共用的按鈕間隙來排列相鄰按鈕。

text
.instui-button-group (0..1)
  .instui-button (1..n)
flowchart TD n0[".instui-button-group (0..1)"]:::cssdoc-root n1(".instui-button"):::cssdoc-part n0 -->|1..n| n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾器 ​

修飾器說明
.-color-ai一個 AI 動作。
.-color-ai-secondary較低強調的 AI 動作。
.-color-danger破壞性（刪除）動作。
.-color-primary（預設）主要動作。
.-color-primary-inverse已棄用 — use .-on-color.
.-color-secondary較低強調的次要動作。
.-color-success正向／確認動作。
.-color-tertiary文字樣式的動作（在懸停前無填色或描邊）。
.-condensed為密集工具列提供更緊湊的內距。
.-display-block全寬塊級按鈕。
.-ghost已棄用 — use .-color-tertiary.
.-icon-*在標籤之前從圖示集合渲染一個字形（例如 -icon-arrow-right），以按鈕文字色繪製；與 -shape-square/-shape-circle 搭配可做成僅圖示按鈕。
.-on-color適用於放在有色（非中性）表面上的按鈕。與 -color-primary 組合（預設）會填充白色並使用深色文字；與 -color-secondary 組合則保持透明並使用白色邊框與文字。
.-shape-circle圓形圖示按鈕。
.-shape-square方形圖示按鈕。
.-size-large大型。-size-lg 的長形式別名。
.-size-lg大。
.-size-md（預設）中等尺寸。
.-size-medium（預設）中等尺寸。為 -size-md 的完整別名。
.-size-sm小。
.-size-small小。-size-sm 的長形式別名。
.-toggle有按下狀態的切換按鈕（以 aria-pressed 驅動）。
.-without-background移除填色（幽靈樣式）。
.-without-border移除邊框。

偽元素 ​

偽元素說明
::afterAI 次要的漸層描邊環，僅遮罩於按鈕的框架上。
::beforeAI 字形，自動加入 AI 按鈕，並以該變體自身的顏色進行遮罩。

狀態 ​

狀態說明
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—
:state(pressed)—

已使用的代幣 ​

Token型別值
--instui-border-width-md<length>0.125rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-interactive-action-ai-bottom-gradient-active<color>#01626E
--instui-color-background-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-background-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-active-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-top-gradient-active<color>#793F93
--instui-color-background-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-background-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-background-interactive-action-destructive-active<color>#AE161B
--instui-color-background-interactive-action-destructive-base<color>#CF1F24
--instui-color-background-interactive-action-destructive-hover<color>#E62429
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-background-interactive-action-secondary-active<color>LightDarklight-dark(#44709F, #2E5177)
--instui-color-background-interactive-action-success-base<color>#037D37
--instui-color-background-interactive-action-success-hover<color>#03893D
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-interactive-action-ai-bottom-gradient-active<color>LightDarklight-dark(#01626E, #02717E)
--instui-color-stroke-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-stroke-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-stroke-interactive-action-ai-top-gradient-active<color>LightDarklight-dark(#793F93, #8A49A7)
--instui-color-stroke-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-stroke-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-secondary-active<color>LightDarklight-dark(#44709F, #2E5177)
--instui-color-text-interactive-action-ai-active<color>#ffffff
--instui-color-text-interactive-action-ai-base<color>#ffffff
--instui-color-text-interactive-action-ai-hover<color>#ffffff
--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base<color>LightDarklight-dark(#027887, #3CC0D4)
--instui-color-text-interactive-action-ai-secondary-top-gradient-base<color>LightDarklight-dark(#944FB3, #CAA1D9)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-color-text-interactive-action-secondary-base<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-color-text-interactive-action-status-base<color>#ffffff
--instui-component-base-button-ai-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-font-size<length>1.125rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-large-padding-horizontal<length>1.25rem
--instui-component-base-button-medium-font-size<length>1rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-medium-padding-horizontal<length>1rem
--instui-component-base-button-primary-color<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-primary-ghost-active-background<color>LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-background<color>transparent
--instui-component-base-button-primary-ghost-border-color<color>LightDarklight-dark(#1D354F66, #EEF4FD)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background<color>LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-active-background<color>#B6CCEA
--instui-component-base-button-primary-inverse-background<color>#ffffff
--instui-component-base-button-primary-inverse-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-color<color>#213D5B
--instui-component-base-button-primary-inverse-ghost-active-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-ghost-color<color>#ffffff
--instui-component-base-button-primary-inverse-ghost-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background<color>#D5E2F6
--instui-component-base-button-primary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color<color>#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color<color>#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color<color>#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color<color>#213D5B
--instui-component-base-button-secondary-active-background<color>LightDarklight-dark(#3D658F33, #86A8D5)
--instui-component-base-button-secondary-active-border-color<color>LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-active-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background<color>LightDarklight-dark(#44709F33, #86A8D5)
--instui-component-base-button-secondary-border-color<color>LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-secondary-hover-background<color>LightDarklight-dark(#4D7EB333, #86A8D5)
--instui-component-base-button-secondary-hover-border-color<color>LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-hover-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-secondary-on-color-active-text-color<color>#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color<color>#9EA6AD
--instui-component-base-button-secondary-on-color-hover-text-color<color>#ffffff
--instui-component-base-button-small-font-size<length>0.875rem
--instui-component-base-button-small-height<length>2rem
--instui-component-base-button-small-padding-horizontal<length>0.75rem
--instui-component-base-button-tertiary-active-border-color<color>LightDarklight-dark(#1D354F4D, #EEF4FD)
--instui-component-base-button-tertiary-active-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color<color>LightDarklight-dark(#1D354F33, #EEF4FD)
--instui-component-base-button-tertiary-hover-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-icon-action-ai-disabled-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-shared-tokens-spacing-gap-buttons<length>0.75rem
--instui-font-family-base[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-font-weight-interactive<integer>500
--instui-line-height-standalone-text-base<length>1rem
--instui-spacing-space-xs<length>0.25rem

相關 ​