CSS: button-set

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

Its own chained modifiers (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) bir çocuğun aynı kategoride kendi modifikatörünü taşımaması halinde her .instui-button için bir varsayılan belirler — bir butonun kendi modifikatör sınıfı her zaman grubun varsayılanının önündedir. -icon-* her zaman buton başına tanımlıdır; grup tarafından asla okunmaz. Kullanımdan kalkmış buton takma adları (-ghost, -color-primary-inverse) ) grup düzeyinde modifikatör olarak desteklenmez — bunun yerine kanonik karşılıklarını (-color-tertiary, -on-color)) kullanın.

Erişilebilirlik

İlgili eylemler için etiketli bir grup kullanın; düğmeler bir geçiş seçeneğini temsil ettiğinde, her durumu aria-pressed ile belirtin. Sadece simge içeren düğmelere erişilebilir bir ad verin.

Kullanım

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">İptal</button>
  <button class="instui-button -color-primary -icon-checkmark">Onayla</button>
</div>

Flush (no seams)

html

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

Yapı

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;

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

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>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-color-background-interactive-action-ai-secondary-active-top-gradient`	`<color>`	LightDark`light-dark(#F3E5F7, #522965)`
`--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient`	`<color>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-color-background-interactive-action-ai-secondary-hover-top-gradient`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-background-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-background-interactive-action-primary-hover`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#F2F4F5, #273540)`
`--instui-color-stroke-interactive-action-ai-bottom-gradient-active`	`<color>`	LightDark`light-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>`	LightDark`light-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>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-stroke-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-stroke-interactive-action-primary-hover`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#027887, #3CC0D4)`
`--instui-color-text-interactive-action-ai-secondary-top-gradient-base`	`<color>`	LightDark`light-dark(#944FB3, #CAA1D9)`
`--instui-color-text-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-color-text-interactive-action-secondary-base`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-color-text-interactive-action-status-base`	`<color>`	`#ffffff`
`--instui-component-base-button-ai-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-ai-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-ai-disabled-text-color`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-component-base-button-primary-disabled-background-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-ghost-active-background`	—	`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-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)`
`--instui-component-base-button-primary-ghost-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-primary-ghost-hover-background`	—	`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-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)`
`--instui-component-base-button-secondary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-background`	`<color>`	LightDark`light-dark(#44709f33, #86a8d54d)`
`--instui-component-base-button-secondary-border-color`	—	`color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)`
`--instui-component-base-button-secondary-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-secondary-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-secondary-disabled-text-color`	`<color>`	LightDark`light-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-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)`
`--instui-component-base-button-secondary-hover-text-color`	`<color>`	LightDark`light-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-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)`
`--instui-component-base-button-tertiary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-tertiary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-tertiary-disabled-text-color`	`<color>`	LightDark`light-dark(#AAB0B5, #4A5B68)`
`--instui-component-base-button-tertiary-hover-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)`
`--instui-component-base-button-tertiary-hover-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-icon-action-ai-disabled-color`	`<color>`	LightDark`light-dark(#9EA6AD, #6A7883)`
`--instui-spacing-space-xs`	`<length>`	`0.25rem`

Alt bileşenler

button

İlgili

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

Bileşenler

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

Yardımcılar

Kurallar

Beyanlar

Plugins

layout

CSS: button-set

Erişilebilirlik

Kullanım

Per-button override

Flush (no seams)

Yapı

Değiştiriciler

Sözde elemanlar

Durumlar

Tüketilen tokenler

Alt bileşenler

İlgili

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

CSS: button-set ​

Erişilebilirlik ​

Kullanım ​

Per-button override ​

Flush (no seams) ​

Yapı ​

Değiştiriciler ​

Sözde elemanlar ​

Durumlar ​

Tüketilen tokenler ​

Alt bileşenler ​

İlgili ​

CSS: button-set

Erişilebilirlik

Kullanım

Per-button override

Flush (no seams)

Yapı

Değiştiriciler

Sözde elemanlar

Durumlar

Tüketilen tokenler

Alt bileşenler

İlgili