CSS: close-button ​

.instui-close-button — 一種透明圖示按鈕，自行繪製 × 符號，提供三種尺寸及一種有色變體。

始終以僅圖示的控制項呈現，沒有可見標籤，因此必須提供 aria-label，不可選；可與 button 的 -without-background 「ghost」變體比較，該變體保留文字標籤。

Source: close-button.css

TIP

JS 加強 — 此元件的 CSS 可獨立呈現並運作；與 @pantoken/interactions 配對可新增互動行為。請參閱下方的 修飾子表格。

無障礙 ​

為僅圖示按鈕加上 aria-label（例如「Close」），並以 aria-disabled（或原生的 disabled）標示停用按鈕。

使用方法 ​

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

範例 ​

html
<button class="instui-close-button -size-sm" aria-label="Close"></button>

修飾器 ​

修飾器說明
.-color-inverse已棄用 — use .-on-color.
.-on-color適用於置於有色（非中性）表面上的關閉按鈕。
.-size-large大型。-size-lg 的長形式別名。
.-size-lg大。
.-size-md（預設）中等尺寸。
.-size-medium（預設）中等尺寸。為 -size-md 的完整別名。
.-size-sm小。
.-size-small小。-size-sm 的長形式別名。

偽元素 ​

偽元素說明
::before× 符號，以 currentColor 為遮罩。

狀態 ​

狀態說明
[aria-disabled="true"]—
:disabled—

已使用的代幣 ​

Token型別值
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-ghost-active-background<color>LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-hover-background<color>LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-ghost-active-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-small-height<length>2rem
--instui-component-icon-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-icon-disabled-base-color<color>LightDarklight-dark(#8D959F, #576773)
--instui-component-icon-disabled-on-color<color>LightDarklight-dark(#C7CACD, #9EA6AD)
--instui-component-icon-on-color<color>#ffffff
--instui-icon-x<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs<length>0.25rem

相關 ​

  • button — 通用的操作按鈕。