CSS: button-set ​

.instui-button-set — Yon ranje bouton ki kole (flush, san espas), ak sèlman de kwen ekstèn li yo ki awondi.

Pwòp modifyè an chèn li yo (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block)) bay yon valè pa defo pou chak pitit .instui-button ki pa gen pwòp modifyè pa li nan menm kategori a — klas modifyè yon bouton toujou gen priyorite sou valè pa defo gwoup la. -icon-* toujou espesifik pou chak bouton; yo pa janm li nan gwoup la. Alias bouton ki depreke yo (-ghost, -color-primary-inverse) pa sipòte kòm modifyè nan nivo gwoup — sèvi ak ranplasman kanonik yo pito (-color-tertiary, -on-color) pito. Chak jonksyon montre yon sèl liy separasyon 1px nan koulè bòdi bouton yo (ranpli solid yo, ki gen bòdi ki matche ak ranpli a, pran koulè etikèt la).). -without-seam se sèlman pou gwoup la: li kache liy separasyon sa a pou bouton yo sanble ak yon sèl kontwòl kontinyèl. Mete -width-half sou yon bouton pitit apa ki gen sèlman yon ikon pou yon deklanchè aksyon divize ki gen mwatye lajè kare nòmal la ak tout wotè bouton an.

Itilizasyon ​

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">Anile</button>
  <button class="instui-button -color-primary -icon-checkmark">Konfime</button>
</div>

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">Jou</button>
  <button class="instui-button"> Semèn 1</button>
  <button class="instui-button">Mwa</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">Sove chanjman</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>

Estrikti ​

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;

Modifikatè ​

ModifikatèDeskripsyon
.-color-aiFè chak pitit ki pa modifye resevwa tretman dégradé AI a pa default.
.-color-ai-secondaryFè chak pitit ki pa modifye resevwa tretman AI ak mwens enpòtans la pa default.
.-color-dangerFè chak pitit ki pa modifye resevwa koulè destriktif la pa default.
.-color-primaryFè chak pitit ki pa modifye resevwa koulè prensipal la pa default.
.-color-secondaryFè chak pitit ki pa modifye resevwa koulè segondè a pa default.
.-color-successFè chak pitit ki pa modifye resevwa koulè siksè a pa default.
.-color-tertiaryDefini chak pitit ki pa modifye sou defo nan koulè tersyè a (text-style) koulè.
.-condensedFè chak pitit ki pa modifye resevwa plis epesè padding pa default.
.-display-blockFè chak pitit ki pa modifye elaji sou tout lajè a.
.-on-colorFè chak pitit ki pa modifye prepare pou plasman sou yon sifas ki gen koulè pa default.
.-shape-circleFè chak pitit ki pa modifye vin yon bouton ikon wonn pa default.
.-shape-squareFè chak pitit ki pa modifye vin yon bouton ikon kare pa default.
.-size-lgFè chak pitit ki pa modifye vin gwo pa default.
.-size-md(default) gwosè mwayen.
.-size-smFè chak pitit ki pa modifye vin piti pa default.
.-toggleFè chak pitit ki pa modifye resevwa tretman toggle eta peze a pa default.
.-without-backgroundFè chak pitit ki pa modifye pa gen ranpli pa default.
.-without-borderFè chak pitit ki pa modifye pa gen bor pa default.
.-without-seamKache liy 1px ki genyen ant bouton yo.

Pseudo-eleman ​

Pseudo-elemanDeskripsyon
::after—
::before—

Eta ​

EtaDeskripsyon
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

Aksè ​

Sèvi ak yon gwoup ki gen etikèt pou aksyon ki gen rapò; lè bouton yo reprezante yon chwa pou aktive/dezaktive, montre chak eta avèk aria-pressed. Bay bouton ki gen sèlman yon ikon yo yon non aksesib. Deklanchè ki gen mwatye lajè yo se sib etwat (16px, 20px, oswa 24px nan gwosè estanda yo); asire gen ase espas ant sib yo oswa itilize yon bouton kare plen lajè pou entèfas tactile.

Règ (axe-core)Chanjman mak (klè)Chanjman mak (fènwa)CanvasCanvas, gwo kontras
color-contrastWCAG 2.2 1.4.3Bezwen revizyonBezwen revizyonBezwen revizyonBezwen revizyon

Eleman yo dwe satisfè nivo minimòm rapò kontras koulè

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

Tout sib tactile dwe mezire omwen 24px, oswa dwe gen ase espas ant yo

  • .-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"]
KondisyonChanjman mak (klè)Chanjman mak (fènwa)CanvasCanvas, gwo kontras
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

Rebrand (limyè): Avèk prefers-contrast: more, sis eleman tèks pa rive nan kontrast minimòm nan. Pi move a se "Voye" nan 1.64:1 (li bezwen 4.5:1).

Rebrand (fènwa): Avèk prefers-contrast: more, sis eleman tèks pa rive nan kontrast minimòm nan. Pi move a se "Voye" nan 1.78:1 (li bezwen 4.5:1).

Canvas, Canvas gwo kontras: Avèk prefers-contrast: more, de eleman tèks pa rive nan kontrast minimòm nan. Pi move a se "Reekri" nan 1.88:1 (li bezwen 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2Pa aplikabPassPassPa aplikab
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassPa aplikabPa aplikab
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

Nan yon fenèt 320px, paj la woule sou kote (li gen 592px lajè nan yon fenèt 320px), epi gen yon eleman ki depase bò dwat la: button.instui-button fini nan 592px. WCAG 1.4.10 Reflow (nivo AA) pa aplike pou kontni ki gen de dimansyon, tankou tablo done ak kat, kidonk yon moun ta dwe jije si sa aplikab.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lektè ekran (simile)Chanjman mak (klè)Chanjman mak (fènwa)CanvasCanvas, gwo kontras
AnnouncementsPassPassPassPass

Rezilta otomatik sa yo pa pwouve paj la respekte WCAG; toujou gen yon revizyon manyèl ki nesesè.

Tokens konsome ​

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

Sou-konpozan ​

Ki gen rapò ​