CSS: button-set ​

.instui-button-set — Một hàng nút liền mạch (khít, không khe), với chỉ hai góc ngoài cùng được bo tròn.

Các modifier theo chuỗi riêng của nó (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) đặt giá trị mặc định cho mọi phần tử con .instui-button không có modifier riêng trong cùng danh mục đó — modifier riêng của nút luôn được ưu tiên hơn giá trị mặc định của nhóm. -icon-* luôn áp dụng cho từng nút; nó không bao giờ được lấy từ nhóm. Các bí danh nút đã lỗi thời (-ghost, -color-primary-inverse) không được hỗ trợ làm modifier cấp nhóm — hãy dùng các phương án thay thế chuẩn (-color-tertiary, -on-color) thay thế. Mỗi điểm nối tạo ra một đường nối 1px duy nhất có màu viền riêng của các nút (các màu tô đặc, có viền trùng màu tô, sẽ được nhuộm theo màu nhãn). -without-seam chỉ dành cho nhóm: nó ẩn đường nối đó để các nút trông như một điều khiển liền mạch. Đặt -width-half lên một nút con riêng lẻ chỉ có biểu tượng để tạo nút kích hoạt hành động phân tách, rộng bằng một nửa kích thước hình vuông tiêu chuẩn và cao bằng toàn bộ chiều cao của nút.

Sử dụng ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Per-button override ​

html
<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Hủy</button>
  <button class="instui-button -color-primary -icon-checkmark">Xác nhận</button>
</div>

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">Ngày</button>
  <button class="instui-button"> Tuần 1</button>
  <button class="instui-button">Tháng</button>
</div>

Split action ​

Put -width-half on only the icon-only trigger to give it half the standard square button's width, keeping the full height. The main action can have a text label or be an icon-only square button. Group sizes and per-button size overrides apply; the width isn't a fraction of the main action. Give the icon-only button an accessible name. This example shows layout only: wire the trigger to a real menu and manage its expanded state and focus in your application.

html
<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">Lưu thay đổi</button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More save actions"></button>
</div>
<div class="instui-button-set -size-md" role="group" aria-label="Add actions">
  <button class="instui-button -shape-square -icon-plus" type="button" aria-label="Add"></button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More add actions"></button>
</div>

Cấu trúc ​

text
.instui-button-set
  button (component, 1..n)
flowchart TD n0[".instui-button-set"]:::cssdoc-root n1(["button"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa ​

Bộ sửaMô tả
.-color-aiĐặt mặc định cho mọi phần tử con không được sửa đổi thành kiểu gradient AI.
.-color-ai-secondaryĐặt mặc định cho mọi phần tử con không được sửa đổi thành kiểu AI có nhấn mạnh thấp hơn.
.-color-dangerĐặt mặc định cho mọi phần tử con không được sửa đổi thành màu tiêu huỷ (destructive).
.-color-primaryĐặt mặc định cho mọi phần tử con không được sửa đổi thành màu chính (primary).
.-color-secondaryĐặt mặc định cho mọi phần tử con không được sửa đổi thành màu phụ (secondary).
.-color-successĐặt mặc định cho mọi phần tử con không được sửa đổi thành màu thành công (success).
.-color-tertiaryĐặt mặc định cho mọi phần tử con không được sửa đổi thành màu bậc ba (kiểu văn bản) ).
.-condensedĐặt mặc định cho mọi phần tử con không được sửa đổi thành padding chặt hơn.
.-display-blockBố trí mọi phần tử con không được sửa đổi chiếm toàn chiều rộng.
.-on-colorĐặt mặc định cho mọi phần tử con không được sửa đổi để đặt trên nền có màu.
.-shape-circleĐặt mặc định cho mọi phần tử con không được sửa đổi thành nút biểu tượng tròn.
.-shape-squareĐặt mặc định cho mọi phần tử con không được sửa đổi thành nút biểu tượng vuông.
.-size-lgĐặt mặc định cho mọi phần tử con không được sửa đổi thành kích thước lớn.
.-size-md(mặc định) kích thước trung bình.
.-size-smĐặt mặc định cho mọi phần tử con không được sửa đổi thành kích thước nhỏ.
.-toggleĐặt mặc định cho mọi phần tử con không được sửa đổi thành kiểu chuyển đổi trạng thái nhấn (pressed-state).
.-without-backgroundĐặt mặc định cho mọi phần tử con không được sửa đổi thành không có nền (no fill).
.-without-borderĐặt mặc định cho mọi phần tử con không được sửa đổi thành không có viền.
.-without-seamẨn đường nối 1px giữa các nút.

Phần tử giả ​

Phần tử giảMô tả
::after—
::before—

Trạng thái ​

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

Khả năng truy cập ​

Dùng nhóm có nhãn cho các hành động liên quan; khi các nút biểu thị lựa chọn bật/tắt, hãy thể hiện từng trạng thái bằng aria-pressed. Đặt tên dễ truy cập cho các nút chỉ có biểu tượng. Nút kích hoạt rộng một nửa là mục tiêu chạm hẹp (16px, 20px hoặc 24px ở các kích thước tiêu chuẩn); hãy đảm bảo khoảng cách giữa các mục tiêu đủ rộng hoặc dùng nút vuông có chiều rộng đầy đủ cho giao diện cảm ứng.

Quy tắc (axe-core)Đổi thương hiệu (sáng)Đổi thương hiệu (tối)CanvasCanvas tương phản cao
color-contrastWCAG 2.2 1.4.3Cần xem xétCần xem xétCần xem xétCần xem xét

Các phần tử phải đáp ứng ngưỡng tỷ lệ tương phản màu tối thiểu

  • .-color-ai > button:nth-child(1)
  • .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8FailFailFailFail

Tất cả mục tiêu chạm phải có kích thước tối thiểu 24px hoặc phải có đủ khoảng cách

  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(19) > .-wi...
  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(22) > .-wi...
  • button[aria-label="More add actions"]
Điều kiệnĐổi thương hiệu (sáng)Đổi thương hiệu (tối)CanvasCanvas tương phản cao
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

Đổi thương hiệu (sáng): Với prefers-contrast: more, sáu đoạn văn bản có độ tương phản thấp hơn mức tối thiểu. Tệ nhất là "Gửi" ở mức 1.64:1 (cần 4.5:1).

Đổi thương hiệu (tối): Với prefers-contrast: more, sáu đoạn văn bản có độ tương phản thấp hơn mức tối thiểu. Tệ nhất là "Gửi" ở mức 1.78:1 (cần 4.5:1).

Canvas, Canvas Tương phản cao: Với prefers-contrast: more, hai đoạn văn bản có độ tương phản thấp hơn mức tối thiểu. Tệ nhất là "Viết lại" ở mức 1.88:1 (cần 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2Không áp dụngPassPassKhông áp dụng
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassKhông áp dụngKhông áp dụng
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

Trong cửa sổ rộng 320px, trang bị cuộn ngang (trang rộng 592px trong cửa sổ rộng 320px)), và một phần tử vượt quá cạnh phải: button.instui-button kết thúc ở 592px. WCAG 1.4.10 Reflow (mức AA) miễn trừ nội dung hai chiều như bảng dữ liệu và bản đồ, vì vậy người đánh giá nên xác định liệu trường hợp này có áp dụng hay không.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Trình đọc màn hình (mô phỏng)Đổi thương hiệu (sáng)Đổi thương hiệu (tối)CanvasCanvas tương phản cao
AnnouncementsPassPassPassPass

Các kết quả tự động này không chứng minh rằng trang đáp ứng WCAG; vẫn cần đánh giá thủ công.

Token tiêu thụ ​

TokenKiểuGiá trị
--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>light-dark(color-mix(in srgb, #44709F 15%, transparent), #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>light-dark(color-mix(in srgb, #44709F 0%, transparent), #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(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-ghost-active-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-background<color>transparent
--instui-component-base-button-primary-ghost-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background<color>#E2EAF7
--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-hover-background<color>#EEF4FD
--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>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-base-button-secondary-active-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-active-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background<color>LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-base-button-secondary-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--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>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-base-button-secondary-hover-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-hover-text-color<color>LightDarklight-dark(#1D354F, #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>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--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>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--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-spacing-space-xs<length>0.25rem

Các thành phần phụ ​

Liên quan ​