CSS: button-set

.instui-button-set — Dıştaki iki köşesi yuvarlatılmış, birleşik (sıfır aralıklı) bir buton satırı.

Kendi zincirleme değiştiricileri (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) aynı kategoride kendi değiştiricisini taşımayan her alt öğe için varsayılan bir değer belirler .instui-button — bir düğmenin kendi değiştirici sınıfı, grubun varsayılan değerini her zaman geçersiz kılar. -icon-* her zaman düğmeye özeldir; gruptan asla okunmaz. Kullanımdan kaldırılmış düğme takma adları (-ghost, -color-primary-inverse) grup düzeyinde değiştirici olarak desteklenmez — bunun yerine kanonik karşılıklarını (-color-tertiary, -on-color) kullanın. Her birleşim, düğmelerin kendi kenarlık renginde 1 piksellik tek bir dikiş oluşturur (kenarlığı dolgu rengiyle eşleşen düz dolgular, bu dikişi etiket rengiyle renklendirir). -without-seam yalnızca grupta kullanılır: düğmelerin tek ve kesintisiz bir kontrol gibi görünmesi için bu dikişi gizler. Standart kare genişliğinin yarısı ve düğme yüksekliğinin tamamına sahip bir bölünmüş eylem tetikleyicisi için -width-half sınıfını yalnızca simge içeren tek bir alt düğmeye ekleyin.

Kullanım

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

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">İptal</button>
  <button class="instui-button -color-primary -icon-checkmark">Onayla</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Gün</button>
  <button class="instui-button"> Hafta 1</button>
  <button class="instui-button">Ay</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.

<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">Değişiklikleri kaydet</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>

Yapı

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

Değiştiriciler

Değiştirici	Açıklama
.-color-ai	Varsayılan olarak değiştirilmemiş her çocuğu AI gradyan görünümüne ayarla.
.-color-ai-secondary	Varsayılan olarak değiştirilmemiş her çocuğu düşük vurgu AI görünümüne ayarla.
.-color-danger	Varsayılan olarak değiştirilmemiş her çocuğu yok edici (destructive) renge ayarla.
.-color-primary	Varsayılan olarak değiştirilmemiş her çocuğu birincil (primary) renge ayarla.
.-color-secondary	Varsayılan olarak değiştirilmemiş her çocuğu ikincil (secondary) renge ayarla.
.-color-success	Varsayılan olarak değiştirilmemiş her çocuğu başarılı (success) renge ayarla.
.-color-tertiary	Varsayılan olarak her değiştirilmemiş çocuğu üçüncül (text-style) renk.
.-condensed	Varsayılan olarak değiştirilmemiş her çocuğu daha sıkı içboşluğa (padding) ayarla.
.-display-block	Varsayılan olarak değiştirilmemiş her çocuğu tam genişlikte yerleştir.
.-on-color	Varsayılan olarak değiştirilmemiş her çocuğu renkli bir yüzeyde yerleştirmeye uygun hale getir.
.-shape-circle	Varsayılan olarak değiştirilmemiş her çocuğu yuvarlak ikon buton yap.
.-shape-square	Varsayılan olarak değiştirilmemiş her çocuğu kare ikon buton yap.
.-size-lg	Varsayılan olarak değiştirilmemiş her çocuğu büyük (large) yap.
.-size-md	(varsayılan) orta boyut.
.-size-sm	Varsayılan olarak değiştirilmemiş her çocuğu küçük (small) yap.
.-toggle	Varsayılan olarak değiştirilmemiş her çocuğu basılı durum toggle görünümüne ayarla.
.-without-background	Varsayılan olarak değiştirilmemiş her çocuğu dolgusuz (no fill) yap.
.-without-border	Varsayılan olarak değiştirilmemiş her çocuğu çerçevesiz (no border) yap.
.-without-seam	Düğmeler arasındaki 1px dikişi gizle.

Sözde elemanlar

Sözde eleman	Açıklama
::after	—
::before	—

Durumlar

Durum	Açıklama
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Erişilebilirlik

İlişkili eylemler için etiketli bir grup kullanın; düğmeler bir geçiş seçeneğini temsil ettiğinde, her durumun aria-pressed ile sunulmasını sağlayın. Yalnızca simge içeren düğmelere erişilebilir bir ad verin. Yarım genişlikteki tetikleyiciler dar hedeflerdir (standart boyutlarda 16px, 20px veya 24px); yeterli hedef aralığı bırakın ya da dokunmatik arayüzlerde tam genişlikte kare bir düğme kullanın.

Kurallar (axe-core)	Yeniden markalama (açık)	Yeniden markalama (koyu)	Canvas	Canvas Yüksek Kontrast
color-contrastWCAG 2.2 1.4.3	İnceleme gerekli	İnceleme gerekli	İnceleme gerekli	İnceleme gerekli
	Öğeler, minimum renk kontrastı oranı eşiklerini karşılamalıdır .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Tüm dokunma hedefleri en az 24px boyutunda olmalı veya aralarında yeterli boşluk bulunmalıdır .-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"]

Koşullar	Yeniden markalama (açık)	Yeniden markalama (koyu)	Canvas	Canvas Yüksek Kontrast
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7	Pass	Pass	Pass	Pass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6	Fail	Fail	Fail	Fail
	Yeniden markalama (açık): prefers-contrast: more ile altı metin parçası minimum kontrastın altında kalıyor. En kötüsü, 1.64:1 kontrast oranına sahip "Gönder" (4.5:1 gerekiyor). Yeniden markalama (koyu): prefers-contrast: more ile altı metin parçası minimum kontrastın altında kalıyor. En kötüsü, 1.78:1 kontrast oranına sahip "Gönder" (4.5:1 gerekiyor). Canvas, Canvas Yüksek Kontrast: prefers-contrast: more ile iki metin parçası minimum kontrastın altında kalıyor. En kötüsü, 1.88:1 kontrast oranına sahip "Yeniden yaz" (4.5:1 gerekiyor).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Uygulanamaz	Pass	Pass	Uygulanamaz
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Uygulanamaz	Uygulanamaz
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	320 piksel genişliğindeki bir pencerede sayfa yana doğru kayıyor (320 piksel genişliğindeki pencerede 592 piksel genişliğinde)) ve bir öğe sağ kenarı aşıyor: button.instui-button 592 pikselde bitiyor. WCAG 1.4.10 Yeniden Akış (AA düzeyi)), veri tabloları ve haritalar gibi iki boyutlu içerikleri kapsam dışında bırakır; bu nedenle bunun geçerli olup olmadığına kullanıcı karar vermelidir.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Ekran okuyucu (simüle edilmiş)	Yeniden markalama (açık)	Yeniden markalama (koyu)	Canvas	Canvas Yüksek Kontrast
Announcements	Pass	Pass	Pass	Pass

Bu otomatik sonuçlar, sayfanın WCAG gerekliliklerini karşıladığını kanıtlamaz; yine de manuel inceleme gerekir.

Tüketilen tokenler

Token	Tür	Değer
--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

Alt bileşenler

• button

İlgili

• close-button — Sadece simge olan kapatma düğmesi.