CSS: button-set ​

.instui-button-set — Een naadloze (aansluitend, zonder spleet) rij knoppen, waarbij alleen de twee buitenste hoeken afgerond zijn.

De eigen aaneengeschakelde modifiers (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) stellen voor elk onderliggend element een standaardwaarde in .instui-button dat niet zelf een modifier in diezelfde categorie heeft — de eigen modifierklasse van een knop heeft altijd voorrang op de standaardwaarde van de groep. -icon-* geldt altijd per knop; de waarde wordt nooit overgenomen van de groep. Verouderde knopaliassen (-ghost, -color-primary-inverse) worden niet ondersteund als modifiers op groepsniveau — gebruik in plaats daarvan de canonieke vervangingen (-color-tertiary, -on-color) . Elke verbinding toont een naad van 1px in de eigen randkleur van de knoppen (bij effen vullingen, waarvan de rand overeenkomt met de vulling, wordt deze getint met de labelkleur). -without-seam geldt alleen voor groepen: hiermee wordt de naad verborgen, zodat de knoppen eruitzien als één doorlopende bediening. Plaats -width-half op een afzonderlijke onderliggende knop met alleen een pictogram voor een split-actiontrigger met de helft van de standaard vierkante breedte en de volledige knophoogte.

Gebruik ​

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

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">Dag</button>
  <button class="instui-button"> Week 1</button>
  <button class="instui-button">Maand</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">Wijzigingen opslaan</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>

Structuur ​

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;

Modifiers ​

ModifierBeschrijving
.-color-aiStel elk niet-aangepast kind standaard in op de AI-gradientbehandeling.
.-color-ai-secondaryStel elk niet-aangepast kind standaard in op de AI-behandeling met lagere nadruk.
.-color-dangerStel elk niet-aangepast kind standaard in op de destructieve kleur.
.-color-primaryStel elk niet-aangepast kind standaard in op de primaire kleur.
.-color-secondaryStel elk niet-aangepast kind standaard in op de secundaire kleur.
.-color-successStel elk niet-aangepast kind standaard in op de succes-kleur.
.-color-tertiaryStel elk niet-aangepast kind standaard in op de tertiaire (tekststijl)) kleur.
.-condensedStel elk niet-aangepast kind standaard in op strakkere opvulling.
.-display-blockLay-out elk niet-aangepast kind full-width.
.-on-colorStel elk niet-aangepast kind standaard in voor plaatsing op een gekleurde ondergrond.
.-shape-circleStel elk niet-aangepast kind standaard in als ronde icoonknop.
.-shape-squareStel elk niet-aangepast kind standaard in als vierkante icoonknop.
.-size-lgStel elk niet-aangepast kind standaard in op groot.
.-size-md(standaard) medium formaat.
.-size-smStel elk niet-aangepast kind standaard in op klein.
.-toggleStel elk niet-aangepast kind standaard in op de toggle-behandeling voor de ingedrukte status.
.-without-backgroundStel elk niet-aangepast kind standaard in op geen vulling.
.-without-borderStel elk niet-aangepast kind standaard in op geen rand.
.-without-seamVerberg de 1px-naad tussen knoppen.

Pseudo-elementen ​

Pseudo-elementBeschrijving
::after—
::before—

Staten ​

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

Toegankelijkheid ​

Gebruik een groep met een label voor verwante acties; geef bij knoppen die een schakelkeuze voorstellen elke status weer met aria-pressed. Geef knoppen met alleen een pictogram een toegankelijke naam. Triggers met halve breedte zijn smalle aanraakdoelen (16px, 20px of 24px bij de standaardformaten); zorg voor voldoende ruimte tussen doelen of gebruik voor aanraakinterfaces een vierkante knop met volledige breedte.

Regels (axe-core)Huisstijlwijziging (licht)Huisstijlwijziging (donker)CanvasCanvas hoog contrast
color-contrastWCAG 2.2 1.4.3Beoordeling nodigBeoordeling nodigBeoordeling nodigBeoordeling nodig

Elementen moeten voldoen aan de minimale kleurcontrastverhoudingen

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

Alle aanraakdoelen moeten 24px groot zijn of voldoende ruimte ertussen hebben

  • .-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"]
VoorwaardenHuisstijlwijziging (licht)Huisstijlwijziging (donker)CanvasCanvas hoog contrast
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

Rebranding (licht): Bij prefers-contrast: more vallen zes tekstdelen onder het minimale contrast. Het slechtste is "Verzenden" met 1.64:1 (vereist 4.5:1).

Rebranding (donker): Bij prefers-contrast: more vallen zes tekstdelen onder het minimale contrast. Het slechtste is "Verzenden" met 1.78:1 (vereist 4.5:1).

Canvas, Canvas hoog contrast: Bij prefers-contrast: more vallen twee tekstdelen onder het minimale contrast. Het slechtste is "Herschrijven" met 1.88:1 (vereist 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2Niet van toepassingPassPassNiet van toepassing
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassNiet van toepassingNiet van toepassing
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

In een venster van 320 px scrolt de pagina horizontaal (de pagina is 592 px breed in een venster van 320 px)), en één element steekt voorbij de rechterrand: button.instui-button eindigt op 592 px. WCAG 1.4.10 Reflow (niveau AA) stelt tweedimensionale inhoud, zoals gegevenstabellen en kaarten, vrij; daarom moet iemand beoordelen of die uitzondering hier van toepassing is.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Schermlezer (gesimuleerd)Huisstijlwijziging (licht)Huisstijlwijziging (donker)CanvasCanvas hoog contrast
AnnouncementsPassPassPassPass

Deze geautomatiseerde resultaten tonen niet aan dat de pagina aan WCAG voldoet; handmatige beoordeling blijft nodig.

Gebruikte tokens ​

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

Subcomponenten ​

Gerelateerd ​