CSS: button-set

.instui-button-set — Una fila col·locada a ras (sense espai) de botons, amb només les dues cantonades externes arrodonides.

Els seus propis modificadors encadenats (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) estableixen un valor predeterminat per a cada fill .instui-button que no té el seu propi modificador en aquesta mateixa categoria — la classe de modificador pròpia d'un botó sempre preval sobre el valor predeterminat del grup. -icon-* sempre és per botó; mai no es llegeix del grup. Els àlies de botó obsolets (-ghost, -color-primary-inverse) no s'admeten com a modificadors a nivell de grup — utilitza'n les substitucions canòniques (-color-tertiary, -on-color) en el seu lloc. Cada unió mostra una separació d'1 px del color de la vora dels botons (els farcits sòlids, amb una vora del mateix color que el farcit, la tenyeixen amb el color de l'etiqueta). -without-seam només es pot utilitzar al grup: amaga aquesta separació perquè els botons es percebin com un únic control continu. Posa -width-half en un botó fill individual només amb icona per crear un activador d'acció dividida amb la meitat de l'amplada estàndard del quadrat i tota l'alçada del botó.

Ús

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

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Cancel·la</button>
  <button class="instui-button -color-primary -icon-checkmark">Confirma</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Dia</button>
  <button class="instui-button"> Setmana 1</button>
  <button class="instui-button">Mes</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">Desa els canvis</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>

Estructura

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

Modificadors

Modificador	Descripció
.-color-ai	Assigna per defecte a cada fill no modificat el tractament de degradat d'IA.
.-color-ai-secondary	Assigna per defecte a cada fill no modificat el tractament d'IA de menor èmfasi.
.-color-danger	Assigna per defecte a cada fill no modificat el color destructiu.
.-color-primary	Assigna per defecte a cada fill no modificat el color primari.
.-color-secondary	Assigna per defecte a cada fill no modificat el color secundari.
.-color-success	Assigna per defecte a cada fill no modificat el color d'èxit.
.-color-tertiary	Assigna per defecte a cada fill no modificat el color terciari (estil de text)).
.-condensed	Assigna per defecte a cada fill no modificat un farciment més ajustat.
.-display-block	Col·loca cada fill no modificat perquè ocupi tota l'amplada.
.-on-color	Assigna per defecte a cada fill no modificat per a la col·locació sobre una superfície acolorida.
.-shape-circle	Assigna per defecte a cada fill no modificat un botó icònic rodó.
.-shape-square	Assigna per defecte a cada fill no modificat un botó icònic quadrat.
.-size-lg	Assigna per defecte a cada fill no modificat la grandària gran.
.-size-md	(per defecte) mida mitjana.
.-size-sm	Assigna per defecte a cada fill no modificat la grandària petita.
.-toggle	Assigna per defecte a cada fill no modificat el tractament de commutació en estat pressionat.
.-without-background	Assigna per defecte a cada fill no modificat sense farciment.
.-without-border	Assigna per defecte a cada fill no modificat sense vora.
.-without-seam	Amaga la costura d'1px entre els botons.

Pseudoelements

Pseudoelement	Descripció
::after	—
::before	—

Estats

Estat	Descripció
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Accessibilitat

Utilitza un grup amb etiqueta per a les accions relacionades; quan els botons representin una opció de commutació, indica cada estat amb aria-pressed. Dona un nom accessible als botons que només tenen una icona. Els activadors de mitja amplada són objectius estrets (16 px, 20 px o 24 px a les mides estàndard); assegura't que hi hagi prou espai entre objectius o utilitza un botó quadrat d'amplada completa per a les interfícies tàctils.

Regles (axe-core)	Rebrand (clar)	Rebrand (fosc)	Canvas	Canvas d'alt contrast
color-contrastWCAG 2.2 1.4.3	Cal revisar	Cal revisar	Cal revisar	Cal revisar
	Els elements han de complir els llindars mínims de relació de contrast de color .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Tots els objectius tàctils han de fer 24 px o cal deixar prou espai .-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"]

Condicions	Rebrand (clar)	Rebrand (fosc)	Canvas	Canvas d'alt contrast
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
	Canvi de marca (clar): Amb prefers-contrast: more, sis fragments de text queden per sota del contrast mínim. El pitjor és «Envia», amb 1.64:1 (en necessita 4.5:1). Canvi de marca (fosc): Amb prefers-contrast: more, sis fragments de text queden per sota del contrast mínim. El pitjor és «Envia», amb 1.78:1 (en necessita 4.5:1). Canvas, Canvas amb contrast alt: Amb prefers-contrast: more, dos fragments de text queden per sota del contrast mínim. El pitjor és «Reescriu», amb 1.88:1 (en necessita 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	No aplicable	Pass	Pass	No aplicable
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	No aplicable	No aplicable
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	En una finestra de 320 px, la pàgina es desplaça lateralment (fa 592 px d’amplada en una finestra de 320 px)), i un element sobresurt per la vora dreta: button.instui-button acaba als 592 px. WCAG 1.4.10 Reflow (nivell AA)) n’exclou els continguts bidimensionals, com ara les taules de dades i els mapes; per tant, cal valorar si aquesta excepció s’hi aplica.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Lector de pantalla (simulat)	Rebrand (clar)	Rebrand (fosc)	Canvas	Canvas d'alt contrast
Announcements	Pass	Pass	Pass	Pass

Aquests resultats automatitzats no demostren que la pàgina compleixi les WCAG; encara cal una revisió manual.

Tokens consumits

Token	Tipus	Valor
--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

Subcomponents

• button

Relacionat

• close-button — El botó de descartar només amb icona.