CSS: button-set ​

.instui-button-set — Una fila di pulsanti accostati (senza spazi), con arrotondati solo gli angoli esterni.

I suoi modificatori concatenati (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) impostano un valore predefinito per ogni elemento figlio .instui-button che non ha un proprio modificatore nella stessa categoria: la classe del modificatore del singolo pulsante ha sempre la precedenza sul valore predefinito del gruppo. -icon-* è sempre specifico del pulsante; non viene mai letto dal gruppo. Gli alias deprecati dei pulsanti (-ghost, -color-primary-inverse) non sono supportati come modificatori a livello di gruppo: usa invece le relative sostituzioni canoniche (-color-tertiary, -on-color) . Ogni giunzione mostra una sola linea di separazione da 1px nel colore del bordo dei pulsanti (nei riempimenti pieni, il cui bordo corrisponde al riempimento, la linea assume il colore dell'etichetta). -without-seam è solo per i gruppi: nasconde quella linea, così i pulsanti appaiono come un unico controllo continuo. Applica -width-half a un singolo pulsante figlio con sola icona per creare un trigger di azione divisa con metà della larghezza standard del quadrato e l'intera altezza del pulsante.

Uso ​

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

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">Giorno</button>
  <button class="instui-button"> Settimana 1</button>
  <button class="instui-button">Mese</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">Salva modifiche</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>

Struttura ​

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;

Modificatori ​

ModificatoreDescrizione
.-color-aiImposta per default ogni figlio non modificato al trattamento gradiente AI.
.-color-ai-secondaryImposta per default ogni figlio non modificato al trattamento AI a minore enfasi.
.-color-dangerImposta per default ogni figlio non modificato sul colore distruttivo.
.-color-primaryImposta per default ogni figlio non modificato sul colore primario.
.-color-secondaryImposta per default ogni figlio non modificato sul colore secondario.
.-color-successImposta per default ogni figlio non modificato sul colore di successo.
.-color-tertiaryImposta per impostazione predefinita ogni figlio non modificato sul terziario (colore text-style).
.-condensedImposta per default ogni figlio non modificato con padding ridotto.
.-display-blockDistribuisci ogni figlio non modificato su tutta la larghezza.
.-on-colorImposta per default ogni figlio non modificato per il posizionamento su una superficie colorata.
.-shape-circleImposta per default ogni figlio non modificato come pulsante icona rotondo.
.-shape-squareImposta per default ogni figlio non modificato come pulsante icona quadrato.
.-size-lgImposta per default ogni figlio non modificato su grande.
.-size-md(predefinito) dimensione media.
.-size-smImposta per default ogni figlio non modificato su piccolo.
.-toggleImposta per default ogni figlio non modificato al trattamento toggle per stato premuto.
.-without-backgroundImposta per default ogni figlio non modificato senza riempimento.
.-without-borderImposta per default ogni figlio non modificato senza bordo.
.-without-seamNascondi la giuntura di 1px tra i pulsanti.

Pseudo-elementi ​

Pseudo-elementoDescrizione
::after—
::before—

Stati ​

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

Accessibilità ​

Usa un gruppo con etichetta per le azioni correlate; quando i pulsanti rappresentano una scelta alternabile, esponi ogni stato con aria-pressed. Assegna un nome accessibile ai pulsanti con sola icona. I trigger a larghezza dimezzata sono target stretti (16px, 20px o 24px alle dimensioni standard); assicurati che ci sia spazio sufficiente tra i target oppure usa un pulsante quadrato a larghezza intera per le interfacce touch.

Regole (axe-core)Nuovo brand (chiaro)Nuovo brand (scuro)CanvasCanvas ad alto contrasto
color-contrastWCAG 2.2 1.4.3Revisione necessariaRevisione necessariaRevisione necessariaRevisione necessaria

Gli elementi devono rispettare le soglie minime del rapporto di contrasto cromatico

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

Tutti i target touch devono essere di almeno 24px oppure deve esserci spazio sufficiente

  • .-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"]
CondizioniNuovo brand (chiaro)Nuovo brand (scuro)CanvasCanvas ad alto contrasto
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

Restyling (chiaro): Con prefers-contrast: more, sei elementi di testo sono al di sotto del contrasto minimo. Il peggiore è "Invia" con 1.64:1 (ne serve 4.5:1).

Restyling (scuro): Con prefers-contrast: more, sei elementi di testo sono al di sotto del contrasto minimo. Il peggiore è "Invia" con 1.78:1 (ne serve 4.5:1).

Canvas, Canvas ad alto contrasto: Con prefers-contrast: more, due elementi di testo sono al di sotto del contrasto minimo. Il peggiore è "Riscrivi" con 1.88:1 (ne serve 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2Non applicabilePassPassNon applicabile
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassNon applicabileNon applicabile
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

In una finestra di 320px, la pagina scorre orizzontalmente (è larga 592px in una finestra di 320px), e un elemento supera il bordo destro: button.instui-button termina a 592px. WCAG 1.4.10 Reflow (livello AA) esenta i contenuti bidimensionali, come tabelle di dati e mappe, quindi spetta a una persona valutare se questa eccezione sia applicabile.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lettore di schermo (simulato)Nuovo brand (chiaro)Nuovo brand (scuro)CanvasCanvas ad alto contrasto
AnnouncementsPassPassPassPass

Questi risultati automatizzati non dimostrano che la pagina sia conforme alle WCAG; è comunque necessaria una revisione manuale.

Token consumati ​

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

Sottocomponenti ​

Correlati ​