CSS: button-set ​

.instui-button-set — A seamed (flush, zero-gap) row of buttons, with only its outer two corners rounded.

ตัวปรับแต่งแบบเชื่อมโยงของกลุ่มเอง (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) จะกำหนดค่าเริ่มต้นให้กับลูกทุกตัว .instui-button ที่ไม่มีตัวปรับแต่งของตัวเองในหมวดหมู่เดียวกัน — คลาสตัวปรับแต่งของปุ่มเอง จะมีลำดับความสำคัญเหนือค่าเริ่มต้นของกลุ่มเสมอ -icon-* ใช้กับปุ่มแต่ละปุ่มเสมอ; จะ ไม่อ่านค่าจากกลุ่ม ไม่รองรับนามแฝงของปุ่มที่เลิกใช้แล้ว (-ghost, -color-primary-inverse) ในฐานะตัวปรับแต่งระดับกลุ่ม — ให้ใช้ชื่อทดแทนมาตรฐานแทน (-color-tertiary, -on-color) แทน รอยต่อแต่ละจุดจะแสดงเส้นแบ่งหนา 1px ด้วยสีเส้นขอบของปุ่มเอง (สีพื้นทึบซึ่งมีเส้นขอบสีเดียวกับพื้นจะถูกแต้มสีด้วยสีข้อความ). -without-seam ใช้ได้เฉพาะกับกลุ่ม: ซ่อนเส้นแบ่งนั้นเพื่อให้ปุ่มดูเป็น ตัวควบคุมเดียวที่ต่อเนื่องกัน ใส่ -width-half ให้กับปุ่มลูกที่มีเฉพาะไอคอนแต่ละปุ่ม เพื่อสร้าง ปุ่มทริกเกอร์สำหรับการทำงานแบบแยกที่มีความกว้างครึ่งหนึ่งของปุ่มสี่เหลี่ยมมาตรฐานและมีความสูงเท่ากับปุ่มเต็ม

การใช้งาน ​

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">ยกเลิก</button>
  <button class="instui-button -color-primary -icon-checkmark">ยืนยัน</button>
</div>

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">วัน</button>
  <button class="instui-button"> สัปดาห์ที่ 1</button>
  <button class="instui-button">เดือน</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">บันทึกการเปลี่ยนแปลง</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>

โครงสร้าง ​

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;

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.-color-aiตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นรูปแบบไล่ระดับสีของ AI.
.-color-ai-secondaryตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นรูปแบบ AI ที่มีความเน้นต่ำกว่า.
.-color-dangerตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นสีที่ใช้สำหรับการกระทำทำลาย/เป็นอันตราย.
.-color-primaryตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นสีหลัก.
.-color-secondaryตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นสีรอง.
.-color-successตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นสีแสดงความสำเร็จ.
.-color-tertiaryตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นสีเทียทิเรียรี (สไตล์ข้อความ).
.-condensedตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับมีระยะขอบด้านใน (padding) ที่กระชับขึ้น.
.-display-blockจัดวางแต่ละลูกที่ไม่ได้ปรับให้มีความกว้างเต็มพื้นที่.
.-on-colorตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับสำหรับการวางบนพื้นผิวที่มีสี.
.-shape-circleตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นปุ่มไอคอนทรงกลม.
.-shape-squareตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นปุ่มไอคอนทรงสี่เหลี่ยม.
.-size-lgตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นขนาดใหญ่.
.-size-md(ค่าเริ่มต้น) ขนาดกลาง.
.-size-smตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นขนาดเล็ก.
.-toggleตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นรูปแบบสวิตช์ที่แสดงสถานะกด.
.-without-backgroundตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นแบบไม่มีพื้น (no fill).
.-without-borderตั้งค่าเริ่มต้นให้แต่ละลูกที่ไม่ได้ปรับเป็นแบบไม่มีเส้นขอบ.
.-without-seamซ่อนรอยต่อ 1px ระหว่างปุ่ม.

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::after—
::before—

สถานะ ​

สถานะคำอธิบาย
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

การเข้าถึง ​

ใช้กลุ่มที่มีป้ายกำกับสำหรับการทำงานที่เกี่ยวข้องกัน เมื่อปุ่มใช้แทนตัวเลือกแบบสลับ ให้แสดงสถานะแต่ละสถานะด้วย aria-pressed ตั้งชื่อที่เข้าถึงได้ให้ปุ่มที่มีเฉพาะไอคอน ปุ่มทริกเกอร์แบบครึ่งความกว้างเป็นเป้าหมายขนาดเล็ก (16px, 20px หรือ 24px ที่ขนาดมาตรฐาน); ตรวจสอบให้มีระยะห่างระหว่างเป้าหมายเพียงพอ หรือใช้ปุ่มสี่เหลี่ยมเต็มความกว้างสำหรับอินเทอร์เฟซแบบสัมผัส

กฎ (axe-core)รีแบรนด์ (สว่าง)รีแบรนด์ (มืด)CanvasCanvas คอนทราสต์สูง
color-contrastWCAG 2.2 1.4.3ต้องตรวจสอบต้องตรวจสอบต้องตรวจสอบต้องตรวจสอบ

องค์ประกอบต้องมีอัตราส่วนคอนทราสต์ของสีไม่ต่ำกว่าเกณฑ์ขั้นต่ำ

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

เป้าหมายการสัมผัสทั้งหมดต้องมีขนาด 24px หรือเว้นระยะห่างให้เพียงพอ

  • .-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"]
เงื่อนไขรีแบรนด์ (สว่าง)รีแบรนด์ (มืด)CanvasCanvas คอนทราสต์สูง
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

ปรับแบรนด์ใหม่ (light): เมื่อใช้ prefers-contrast: more ข้อความ 6 รายการมีความเปรียบต่างต่ำกว่าค่าขั้นต่ำ โดยรายการที่แย่ที่สุดคือ "ส่ง" ที่ 1.64:1 (ต้องได้ 4.5:1).

ปรับแบรนด์ใหม่ (dark): เมื่อใช้ prefers-contrast: more ข้อความ 6 รายการมีความเปรียบต่างต่ำกว่าค่าขั้นต่ำ โดยรายการที่แย่ที่สุดคือ "ส่ง" ที่ 1.78:1 (ต้องได้ 4.5:1).

Canvas, Canvas High Contrast: เมื่อใช้ prefers-contrast: more ข้อความ 2 รายการมีความเปรียบต่างต่ำกว่าค่าขั้นต่ำ โดยรายการที่แย่ที่สุดคือ "เขียนใหม่" ที่ 1.88:1 (ต้องได้ 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2ไม่เกี่ยวข้องPassPassไม่เกี่ยวข้อง
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassไม่เกี่ยวข้องไม่เกี่ยวข้อง
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

ในหน้าต่างขนาด 320px หน้าเว็บเลื่อนไปด้านข้าง (มีความกว้าง 592px ในหน้าต่างขนาด 320px)) และมีองค์ประกอบหนึ่งยื่นเลยขอบด้านขวาไป: button.instui-button สิ้นสุดที่ 592px WCAG 1.4.10 Reflow (ระดับ AA)) ยกเว้นเนื้อหาสองมิติ เช่น ตารางข้อมูลและแผนที่ ดังนั้นควรพิจารณาว่าข้อยกเว้นนี้ใช้ได้หรือไม่

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
โปรแกรมอ่านหน้าจอ (จำลอง)รีแบรนด์ (สว่าง)รีแบรนด์ (มืด)CanvasCanvas คอนทราสต์สูง
AnnouncementsPassPassPassPass

ผลลัพธ์อัตโนมัติเหล่านี้ไม่ได้ยืนยันว่าหน้าเว็บเป็นไปตาม WCAG; ยังคงต้องตรวจสอบด้วยตนเอง

โทเค็นที่ใช้ ​

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>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

ส่วนประกอบย่อย ​

ที่เกี่ยวข้อง ​

  • close-button — ปุ่มปิดที่เป็นไอคอนเท่านั้น.