CSS: button-set

.instui-button-set — Une rangée de boutons jointifs (affleurants, sans espace), avec seulement ses deux coins extérieurs arrondis.

Ses propres modificateurs chaînés (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) définissent une valeur par défaut pour chaque enfant .instui-button qui n'a pas son propre modificateur dans cette même catégorie — la classe de modificateur propre au bouton l'emporte toujours sur la valeur par défaut du groupe. -icon-* est toujours propre à chaque bouton ; il n'est jamais lu depuis le groupe. Les alias de bouton obsolètes (-ghost, -color-primary-inverse) ne sont pas pris en charge comme modificateurs au niveau du groupe — utilisez leurs remplacements canoniques (-color-tertiary, -on-color) à la place. Chaque jonction laisse apparaître une fine séparation de 1 px dans la couleur de bordure propre aux boutons (les aplats, dont la bordure correspond à la couleur de remplissage, la teintent avec la couleur du libellé). -without-seam est réservé au groupe : il masque cette séparation pour que les boutons forment un seul contrôle continu. Placez -width-half sur un bouton enfant individuel sans icône pour obtenir un déclencheur d'action fractionnée dont la largeur correspond à la moitié de celle du carré standard et dont la hauteur correspond à celle du bouton.

Utilisation

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

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Annuler</button>
  <button class="instui-button -color-primary -icon-checkmark">Confirmer</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Jour</button>
  <button class="instui-button"> Semaine 1</button>
  <button class="instui-button">Mois</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">Enregistrer les modifications</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>

Structure

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

Modificateurs

Modificateur	Description
.-color-ai	Appliquer par défaut à chaque enfant non modifié le traitement dégradé IA.
.-color-ai-secondary	Appliquer par défaut à chaque enfant non modifié le traitement IA à faible emphase.
.-color-danger	Appliquer par défaut à chaque enfant non modifié la couleur destructive.
.-color-primary	Appliquer par défaut à chaque enfant non modifié la couleur primaire.
.-color-secondary	Appliquer par défaut à chaque enfant non modifié la couleur secondaire.
.-color-success	Appliquer par défaut à chaque enfant non modifié la couleur de réussite.
.-color-tertiary	Appliquer par défaut à chaque enfant non modifié la couleur tertiaire (style-texte)).
.-condensed	Appliquer par défaut à chaque enfant non modifié un rembourrage plus serré.
.-display-block	Disposer chaque enfant non modifié en pleine largeur.
.-on-color	Appliquer par défaut à chaque enfant non modifié pour placement sur une surface colorée.
.-shape-circle	Appliquer par défaut à chaque enfant non modifié un bouton icône rond.
.-shape-square	Appliquer par défaut à chaque enfant non modifié un bouton icône carré.
.-size-lg	Appliquer par défaut à chaque enfant non modifié la taille grande.
.-size-md	(par défaut) taille moyenne.
.-size-sm	Appliquer par défaut à chaque enfant non modifié la taille petite.
.-toggle	Appliquer par défaut à chaque enfant non modifié le traitement bascule en état pressé.
.-without-background	Appliquer par défaut à chaque enfant non modifié sans remplissage.
.-without-border	Appliquer par défaut à chaque enfant non modifié sans bordure.
.-without-seam	Masquer la couture d'1px entre les boutons.

Pseudo-éléments

Pseudo-élément	Description
::after	—
::before	—

États

État	Description
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Accessibilité

Utilisez un groupe avec libellé pour les actions associées ; lorsque les boutons représentent un choix à bascule, exposez chaque état avec aria-pressed. Donnez un nom accessible aux boutons sans libellé qui ne contiennent qu'une icône. Les déclencheurs à demi-largeur sont des cibles étroites (16px, 20px ou 24px aux tailles standard) ; prévoyez un espacement suffisant entre les cibles ou utilisez un bouton carré pleine largeur pour les interfaces tactiles.

Règles (axe-core)	Nouvelle identité (clair)	Nouvelle identité (sombre)	Canvas	Canevas à contraste élevé
color-contrastWCAG 2.2 1.4.3	Vérification nécessaire	Vérification nécessaire	Vérification nécessaire	Vérification nécessaire
	Les éléments doivent respecter les seuils minimaux de contraste des couleurs .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Toutes les cibles tactiles doivent mesurer 24px ou être suffisamment espacées .-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"]

Conditions	Nouvelle identité (clair)	Nouvelle identité (sombre)	Canvas	Canevas à contraste élevé
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
	Refonte (clair): Avec prefers-contrast: more, six éléments de texte passent sous le contraste minimal. Le pire est « Send » à 1.64:1 (4.5:1 requis). Refonte (sombre): Avec prefers-contrast: more, six éléments de texte passent sous le contraste minimal. Le pire est « Send » à 1.78:1 (4.5:1 requis). Canvas, Canvas à contraste élevé : Avec prefers-contrast: more, deux éléments de texte passent sous le contraste minimal. Le pire est « Rewrite » à 1.88:1 (4.5:1 requis).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Non applicable	Pass	Pass	Non applicable
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Non applicable	Non applicable
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	Dans une fenêtre de 320 px, la page défile horizontalement (elle fait 592 px de large dans une fenêtre de 320 px)), et un élément dépasse le bord droit : button.instui-button se termine à 592 px. WCAG 1.4.10 Redistribution (niveau AA) exempte les contenus bidimensionnels tels que les tableaux de données et les cartes ; il convient donc de déterminer si cette exception s’applique.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Lecteur d’écran (simulé)	Nouvelle identité (clair)	Nouvelle identité (sombre)	Canvas	Canevas à contraste élevé
Announcements	Pass	Pass	Pass	Pass

Ces résultats automatisés ne permettent pas d’établir que la page est conforme aux WCAG ; une vérification manuelle reste nécessaire.

Jetons consommés

Token	Type	Valeur
--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

Sous-composants

• button

Liés

• close-button — The icon-only dismiss button.