CSS: button-set ​

.instui-button-set — एक सिलवाया हुआ (सपाट, शून्य-श्लेष) बटन पंक्ति, जिसकी केवल बाहरी दो कोने गोल किए गए हैं.

इसके अपने श्रृंखलाबद्ध modifiers (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) हर child के लिए डिफ़ॉल्ट तय करते हैं .instui-button जिसके पास उसी category में अपना modifier नहीं है — button का अपना modifier class हमेशा group के डिफ़ॉल्ट पर प्राथमिकता पाता है। -icon-* हमेशा हर button पर अलग से लागू होता है; इसे group से कभी नहीं लिया जाता। Deprecated button aliases (-ghost, -color-primary-inverse) group-स्तर के modifiers के रूप में समर्थित नहीं हैं — इनके canonical replacements (-color-tertiary, -on-color) का उपयोग करें। हर जोड़ buttons के अपने border color में 1px की एक सीम दिखाता है (ठोस भरण, जिनका border भरण से मेल खाता है, इसे label color से रंग देते हैं). -without-seam केवल group के लिए है: यह उस सीम को छिपाता है ताकि buttons एक सतत नियंत्रण की तरह दिखें। विभाजित-क्रिया वाले trigger के लिए किसी अलग icon-only child button पर -width-half लगाएँ; इसकी चौड़ाई मानक वर्गाकार चौड़ाई की आधी और ऊँचाई पूरी button जितनी होती है।

उपयोग ​

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हर अपरिवर्तित बच्चे के लिए डिफ़ॉल्ट रूप से सघन पैडिंग सेट करें.
.-display-blockहर अपरिवर्तित बच्चे को पूर्ण-चौड़ाई पर लेआउट करें.
.-on-colorहर अपरिवर्तित बच्चे को रंगीन सतह पर रखने के अनुसार डिफ़ॉल्ट करें.
.-shape-circleहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से गोल आइकन बटन बनाएं.
.-shape-squareहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से वर्गाकार आइकन बटन बनाएं.
.-size-lgहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से बड़ा करें.
.-size-md(डिफ़ॉल्ट) मध्यम आकार।
.-size-smहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से छोटा करें.
.-toggleहर अपरिवर्तित बच्चे को डिफ़ॉल्ट रूप से दबाए गए-स्थिति टॉगल उपचार दें.
.-without-backgroundहर अपरिवर्तित बच्चे के लिए डिफ़ॉल्ट रूप से बिना भरे सेट करें.
.-without-borderहर अपरिवर्तित बच्चे के लिए डिफ़ॉल्ट रूप से बिना बॉर्डर सेट करें.
.-without-seamबटनों के बीच 1px की सीम को छिपाएँ.

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::after—
::before—

स्टेट्स ​

स्थितिविवरण
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

एक्सेसिबिलिटी ​

संबंधित कार्रवाइयों के लिए लेबल वाला group उपयोग करें; जब buttons किसी toggle विकल्प को दर्शाते हों, तो aria-pressed के साथ हर स्थिति बताएं। केवल icon वाले buttons को सुलभ नाम दें। आधी चौड़ाई वाले triggers संकरे लक्ष्य होते हैं (मानक आकारों में 16px, 20px या 24px); पर्याप्त लक्ष्य-अंतराल सुनिश्चित करें या touch interfaces के लिए पूरी चौड़ाई वाला वर्गाकार button उपयोग करें।

नियम (axe-core)रीब्रांड (हल्का)रीब्रांड (गहरा)Canvasकैनवस उच्च कंट्रास्ट
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

सभी touch targets कम-से-कम 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"]
स्थितियाँरीब्रांड (हल्का)रीब्रांड (गहरा)Canvasकैनवस उच्च कंट्रास्ट
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

रीब्रांड (हल्का): prefers-contrast: more के साथ, टेक्स्ट के छह हिस्सों का कंट्रास्ट न्यूनतम स्तर से कम है। सबसे खराब "भेजें" का 1.64:1 है (इसके लिए 4.5:1 चाहिए).

रीब्रांड (गहरा): prefers-contrast: more के साथ, टेक्स्ट के छह हिस्सों का कंट्रास्ट न्यूनतम स्तर से कम है। सबसे खराब "भेजें" का 1.78:1 है (इसके लिए 4.5:1 चाहिए).

Canvas, Canvas High Contrast: prefers-contrast: more के साथ, टेक्स्ट के दो हिस्सों का कंट्रास्ट न्यूनतम स्तर से कम है। सबसे खराब "फिर से लिखें" का 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 की विंडो में, पेज क्षैतिज रूप से स्क्रॉल होता है (320px की विंडो में इसकी चौड़ाई 592px है)), और एक तत्व दाएँ किनारे से आगे तक पहुँचता है: button.instui-button 592px पर समाप्त होता है। WCAG 1.4.10 Reflow (स्तर AA) डेटा तालिकाओं और मानचित्रों जैसी द्वि-आयामी सामग्री को छूट देता है, इसलिए किसी व्यक्ति को तय करना चाहिए कि यह लागू होता है या नहीं।

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
स्क्रीन रीडर (अनुकरण किया गया)रीब्रांड (हल्का)रीब्रांड (गहरा)Canvasकैनवस उच्च कंट्रास्ट
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 — आइकन-ओनली डिस्मिस बटन।