CSS: button-set

.instui-button-set — Une rangée de boutons jointifs (bord à bord, sans espace) , dont seuls les deux coins extérieurs sont 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 a toujours priorité sur la valeur par défaut du groupe. -icon-* est toujours propre à chaque bouton; il n'est jamais repris du groupe. Les alias de bouton obsolètes (-ghost, -color-primary-inverse) ne sont pas pris en charge comme modificateurs au niveau du groupe — utilisez plutôt leurs remplacements canoniques (-color-tertiary, -on-color) à la place. Chaque jonction laisse un joint de 1 px dans la couleur de bordure propre aux boutons (les aplats, dont la bordure correspond au remplissage, sont teintés avec la couleur du libellé). -without-seam est réservé au groupe : il masque ce joint pour que les boutons forment un seul contrôle continu. Ajoutez -width-half à un bouton enfant individuel à icône seule pour créer un déclencheur d'action fractionnée ayant la moitié de la largeur carrée standard et la hauteur complète 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 succès.
.-color-tertiary	Appliquer par défaut à chaque enfant non modifié la couleur tertiaire (style de texte)).
.-condensed	Appliquer par défaut à chaque enfant non modifié un espacement intérieur plus réduit.
.-display-block	Afficher chaque enfant non modifié en pleine largeur.
.-on-color	Par défaut, adapter chaque enfant non modifié pour une utilisation sur une surface colorée.
.-shape-circle	Par défaut, rendre chaque enfant non modifié en bouton icône rond.
.-shape-square	Par défaut, rendre chaque enfant non modifié en bouton icône carré.
.-size-lg	Par défaut, rendre chaque enfant non modifié grand.
.-size-md	(par défaut) taille moyenne.
.-size-sm	Par défaut, rendre chaque enfant non modifié petit.
.-toggle	Par défaut, appliquer à chaque enfant non modifié le traitement de bascule en état pressé.
.-without-background	Par défaut, ne pas remplir chaque enfant non modifié.
.-without-border	Par défaut, ne pas afficher de bordure pour chaque enfant non modifié.
.-without-seam	Masquer la couture de 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 apparentées; lorsque les boutons représentent un choix de bascule, exposez chaque état avec aria-pressed. Donnez un nom accessible aux boutons à icône seule. Les déclencheurs demi-largeur sont des cibles étroites (16px, 20px ou 24px aux tailles standard); assurez-vous d'un espacement suffisant entre les cibles ou utilisez un bouton carré pleine largeur pour les interfaces tactiles.

Règles (axe-core)	Nouvelle image de marque (clair)	Nouvelle image de marque (sombre)	Canvas	Canevas à contraste élevé
color-contrastWCAG 2.2 1.4.3	Examen requis	Examen requis	Examen requis	Examen requis
	Les éléments doivent respecter les seuils minimaux du rapport 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 image de marque (clair)	Nouvelle image de marque (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
	Nouvelle image de marque (clair): Avec prefers-contrast: more, six éléments de texte passent sous le contraste minimal. Le pire est « Envoyer » à 1.64:1 (il faut 4.5:1). Nouvelle image de marque (sombre): Avec prefers-contrast: more, six éléments de texte passent sous le contraste minimal. Le pire est « Envoyer » à 1.78:1 (il faut 4.5:1). Canvas, Canvas High Contrast: Avec prefers-contrast: more, deux éléments de texte passent sous le contraste minimal. Le pire est « Réécrire » à 1.88:1 (il faut 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Sans objet	Pass	Pass	Sans objet
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Sans objet	Sans objet
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 comme les tableaux de données et les cartes; il faut donc 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 image de marque (clair)	Nouvelle image de marque (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; un examen manuel reste nécessaire.

Tokens 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

Connexe

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