CSS: close-button ​

.instui-close-button — Một nút biểu tượng trong suốt vẽ ký hiệu × của chính nó, có ba kích thước và một biến thể cho nền màu.

Luôn hiển thị dưới dạng điều khiển chỉ biểu tượng không có nhãn hiển thị, nên aria-label là bắt buộc, không phải tùy chọn; so sánh với biến thể ghost -without-background của button, vốn giữ lại nhãn văn bản.

Source: close-button.css

TIP

Nâng cao JS — CSS của component này tự render và hoạt động độc lập; ghép với @pantoken/interactions để thêm hành vi tương tác. Xem bảng modifier phía dưới.

Khả năng truy cập ​

Gán cho nút chỉ biểu tượng một aria-label (ví dụ "Close"), và đánh dấu nút bị vô hiệu bằng aria-disabled (hoặc disabled gốc).

Sử dụng ​

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

Các ví dụ ​

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

Bộ sửa ​

Bộ sửaMô tả
.-color-inverseKhông khuyến nghị — use .-on-color.
.-on-colorDùng cho nút đóng đặt trên bề mặt có màu (không trung tính).
.-size-largeLớn. Bút danh dài của -size-lg.
.-size-lgLớn.
.-size-md(mặc định) kích thước trung bình.
.-size-medium(mặc định) kích thước trung bình. Bản bí danh dài của -size-md.
.-size-smNhỏ.
.-size-smallNhỏ. Bút danh dài của -size-sm.

Phần tử giả ​

Phần tử giảMô tả
::beforeKý hiệu ×, được che bằng currentColor.

Trạng thái ​

Trạng tháiMô tả
[aria-disabled="true"]—
:disabled—

Token tiêu thụ ​

TokenKiểuGiá trị
--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

Liên quan ​

  • button — Nút hành động đa dụng.