CSS: button ​

.instui-button — एक पहुँचयोग्य कार्रवाई नियंत्रण, टोकन पैलेट से स्टाइल किया गया; डिफ़ॉल्ट रूप से प्राथमिक।

AI वैरिएंट अपने फ्रेम के लिए दो ग्रेडिएंट्स परत करते हैं — एक padding-box भराव और एक border-box स्ट्रोक — और -color-ai-secondary एक साथ ग्रेडिएंट टेक्स्ट और भराव नहीं पेंट कर सकता, इसलिए इसका केंद्र सामान्य स्थिति में पारदर्शी रहता है और hover या active पर भरता है। -without-background के hover और active में कच्चे hover-background टोकन का उपयोग करने के बजाय एक कम-अपारदर्शिता, हल्का-सा घना ब्रांड वॉश व्युत्पन्न होता है, क्योंकि कच्चे टोकन से ही-रंग पर ही-रंग टेक्स्ट छप सकता है। साथ ही यह अपना स्वयं का आइकन/लेबल gap और हॉरिजॉन्टल padding सेट करता है; -gap-*/-p-*/-padding-* स्पेसिंग यूटिलिटी मॉडिफायर की चेनिंग उन इन-बिल्ट मानों को ओवरराइड कर देती है। वैकल्पिक .instui-button-group रैपर Figma के .buttonGroup को मैप करता है और आसन्न बटन स्पेसिंग का मालिक होता है।

Source: button.css

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

aria-pressed से -toggle वेरिएंट की प्रेस्ड स्थिति संचालित करें, और एक अक्षम बटन को aria-disabled (या नेटिव disabled) से चिह्नित करें।

उपयोग ​

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

डेमो ​

उदाहरण ​

html
<div class="instui-button-group">
  <button class="instui-button">Primary</button>
  <button class="instui-button -color-secondary">Secondary</button>
</div>

संरचना ​

एक समूह रैपर साझा बटन गैप के साथ आसन्न बटनों को व्यवस्थित करता है।

text
.instui-button-group (0..1)
  .instui-button (1..n)
flowchart TD n0[".instui-button-group (0..1)"]:::cssdoc-root n1(".instui-button"):::cssdoc-part n0 -->|1..n| n1 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-primary-inverseअप्रमाणित — use .-on-color.
.-color-secondaryकम-प्रभाव वाली द्वितीयक क्रिया।
.-color-successएक सकारात्मक/पुष्टिकरण वाली क्रिया।
.-color-tertiaryएक टेक्स्ट-स्टाइल क्रिया (hover तक कोई भराव या बॉर्डर नहीं)।
.-condensedघने टूलबार के लिए तंग पैडिंग।
.-display-blockपूर्ण-चौड़ाई ब्लॉक बटन।
.-ghostअप्रमाणित — use .-color-tertiary.
.-icon-*लेबल के पहले आइकन सेट से एक ग्लीफ रेंडर करें (उदा. -icon-arrow-right), जिसे बटन के टेक्स्ट रंग में पेंट किया जाता है; आइकन-ओनली बटन के लिए -shape-square/-shape-circle के साथ जोड़ी बनाएं।
.-on-colorएक रंगीन (गैर-तटस्थ) सतह पर रखे बटन के लिए। -color-primary (डिफ़ॉल्ट) के साथ संयोजन में यह सफेद को भरता है और गहरे टेक्स्ट के साथ आता है; -color-secondary के साथ संयोजन में यह पारदर्शी रहता है और सफेद बॉर्डर व टेक्स्ट देता है।
.-shape-circleएक गोल आइकन बटन।
.-shape-squareएक वर्गाकार आइकन बटन।
.-size-largeबड़ा। -size-lg का लंबा-फॉर्म उपनाम।
.-size-lgबड़ा।
.-size-md(डिफ़ॉल्ट) मध्यम आकार।
.-size-medium(डिफ़ॉल्ट) मध्यम आकार। -size-md का लंबा-फॉर्म उपनाम।
.-size-smछोटा।
.-size-smallछोटा। -size-sm का लंबा-फॉर्म उपनाम।
.-toggleएक प्रेस्ड-स्टेट टॉगल बटन (aria-pressed से संचालित)।
.-without-backgroundभराव हटाएँ (घोस्ट)।
.-without-borderबॉर्डर निकालें।

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

स्यूडो-एलिमेंटविवरण
::afterAI-सेकेंडरी ग्रेडिएंट बॉर्डर रिंग, जो केवल बटन के फ्रेम तक मास्क की गई है।
::beforeAI ग्लीफ, जो AI बटनों में स्वचालित रूप से जोड़ी जाती है और वेरिएंट के अपने रंग में मास्क की जाती है।

स्टेट्स ​

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

उपयोग किये गए टोकन ​

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>LightDarklight-dark(#44709F, #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>LightDarklight-dark(#44709F, #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(#DFE1E3, #334450)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-primary-ghost-active-background<color>LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-background<color>transparent
--instui-component-base-button-primary-ghost-border-color<color>LightDarklight-dark(#1D354F66, #EEF4FD)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background<color>LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-active-background<color>#B6CCEA
--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-ghost-active-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-ghost-color<color>#ffffff
--instui-component-base-button-primary-inverse-ghost-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background<color>#D5E2F6
--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>LightDarklight-dark(#3D658F33, #86A8D5)
--instui-component-base-button-secondary-active-border-color<color>LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-active-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background<color>LightDarklight-dark(#44709F33, #86A8D5)
--instui-component-base-button-secondary-border-color<color>LightDarklight-dark(#44709F00, #86A8D5)
--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>LightDarklight-dark(#4D7EB333, #86A8D5)
--instui-component-base-button-secondary-hover-border-color<color>LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-hover-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-secondary-on-color-active-text-color<color>#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color<color>#9EA6AD
--instui-component-base-button-secondary-on-color-hover-text-color<color>#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>LightDarklight-dark(#1D354F4D, #EEF4FD)
--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>LightDarklight-dark(#1D354F33, #EEF4FD)
--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-component-shared-tokens-spacing-gap-buttons<length>0.75rem
--instui-font-family-base[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-font-weight-interactive<integer>500
--instui-line-height-standalone-text-base<length>1rem
--instui-spacing-space-xs<length>0.25rem

संबंधित ​

  • close-button — आइकन-ओनली डिस्मिस बटन।