CSS: button-set

.instui-button-set — Saumattu (tiivis, ilman rakoa) painikerivi, jonka ainoastaan ulommat kaksi kulmaa ovat pyöristetyt.

Sen omat ketjutetut muokkaimet (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) asettavat oletusarvon jokaiselle lapsielementille .instui-button jolla ei ole omaa muokkainta samassa kategoriassa — painikkeen oma muokkaimen luokka ohittaa aina ryhmän oletusarvon. -icon-* määritetään aina painikekohtaisesti; sitä ei koskaan lueta ryhmästä. Vanhentuneita painikealiaksia (-ghost, -color-primary-inverse) ei tueta ryhmätason muokkaimina — käytä niiden kanonisia korvaajia (-color-tertiary, -on-color) sen sijaan. Jokaisessa liitoskohdassa näkyy 1 px:n sauma painikkeiden omassa reunavärissä (yhtenäiset täytöt, joiden reunaväri vastaa täyttöväriä, sävyttyvät tekstin värillä). -without-seam koskee vain ryhmää: se piilottaa sauman, jolloin painikkeet näyttävät yhdeltä yhtenäiseltä ohjaimelta. Aseta -width-half yksittäiseen vain kuvakkeen sisältävään alipainikkeeseen, kun tarvitset jaetun toiminnon käynnistimen, joka on puolet tavallisen neliöpainikkeen leveydestä ja jonka korkeus vastaa painikkeen korkeutta.

Käyttö

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

Per-button override

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

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Päivä</button>
  <button class="instui-button"> Viikko 1</button>
  <button class="instui-button">Kuukausi</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">Tallenna muutokset</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>

Rakenne

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

Muokkaajat

Muokkaaja	Kuvaus
.-color-ai	Aseta jokainen muokkaamaton lapsi oletuksena AI-liukuvärikäsittelyyn.
.-color-ai-secondary	Aseta jokainen muokkaamaton lapsi oletuksena matalamman korostuksen AI-käsittelyyn.
.-color-danger	Aseta jokainen muokkaamaton lapsi oletuksena tuhoavaan (destructive) väriin.
.-color-primary	Aseta jokainen muokkaamaton lapsi oletuksena primääriväriin.
.-color-secondary	Aseta jokainen muokkaamaton lapsi oletuksena sekundääriväriin.
.-color-success	Aseta jokainen muokkaamaton lapsi oletuksena onnistumisen (success) väriin.
.-color-tertiary	Aseta jokainen muokkaamaton lapsi oletuksena tertiääriseen (tekstityyliseen) väriin.
.-condensed	Aseta jokainen muokkaamaton lapsi oletuksena tiukempaan täytteeseen (padding).
.-display-block	Aseta jokainen muokkaamaton lapsi täyteen leveyteen.
.-on-color	Aseta jokainen muokkaamaton lapsi oletuksena sijoitettavaksi värilliselle pinnalle.
.-shape-circle	Aseta jokainen muokkaamaton lapsi oletuksena pyöreäksi ikoni-painikkeeksi.
.-shape-square	Aseta jokainen muokkaamaton lapsi oletuksena neliömäiseksi ikoni-painikkeeksi.
.-size-lg	Aseta jokainen muokkaamaton lapsi oletuksena suureksi.
.-size-md	(oletus) keskikokoinen.
.-size-sm	Aseta jokainen muokkaamaton lapsi oletuksena pieneksi.
.-toggle	Aseta jokainen muokkaamaton lapsi oletuksena painettuun tilaan liittyvään kytkin- (toggle) käsittelyyn.
.-without-background	Aseta jokainen muokkaamaton lapsi oletuksena ilman täyttöä.
.-without-border	Aseta jokainen muokkaamaton lapsi oletuksena ilman reunusta.
.-without-seam	Piilota painikkeiden välinen 1px:n sauma.

Pseudo-elementit

Pseudo-elementti	Kuvaus
::after	—
::before	—

Tilat

Tila	Kuvaus
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Saavutettavuus

Käytä toisiinsa liittyville toiminnoille nimettyä ryhmää; kun painikkeet edustavat valittavaa vaihtoehtoa, ilmaise kunkin tila aria-pressed-attribuutilla. Anna vain kuvakkeen sisältäville painikkeille saavutettava nimi. Puolileveät käynnistimet ovat kapeita kohteita (16 px, 20 px tai 24 px vakioko’oissa); varmista kohteiden riittävä välistys tai käytä kosketuskäyttöliittymissä täysleveää neliöpainiketta.

Säännöt (axe-core)	Uudelleenbrändäys (vaalea)	Uudelleenbrändäys (tumma)	Canvas	Canvasin suuri kontrasti
color-contrastWCAG 2.2 1.4.3	Tarkistettava	Tarkistettava	Tarkistettava	Tarkistettava
	Elementtien on täytettävä vähimmäisvaatimukset värikontrastisuhteelle .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Kaikkien kosketuskohteiden on oltava vähintään 24 px:n kokoisia tai niiden ympärillä on oltava riittävästi tilaa .-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"]

Ehdot	Uudelleenbrändäys (vaalea)	Uudelleenbrändäys (tumma)	Canvas	Canvasin suuri kontrasti
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
	Uudelleenbrändäys (vaalea): Kun prefers-contrast: more on käytössä, kuusi tekstiosaa jää vähimmäiskontrastin alapuolelle. Heikoin kontrasti on tekstillä "Lähetä": 1.64:1 (vaatimus on 4.5:1). Uudelleenbrändäys (tumma): Kun prefers-contrast: more on käytössä, kuusi tekstiosaa jää vähimmäiskontrastin alapuolelle. Heikoin kontrasti on tekstillä "Lähetä": 1.78:1 (vaatimus on 4.5:1). Canvas, Canvas High Contrast: Kun prefers-contrast: more on käytössä, kaksi tekstiosaa jää vähimmäiskontrastin alapuolelle. Heikoin kontrasti on tekstillä "Kirjoita uudelleen": 1.88:1 (vaatimus on 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Ei sovellu	Pass	Pass	Ei sovellu
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Ei sovellu	Ei sovellu
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	320px:n levyisessä ikkunassa sivu vierittää vaakasuunnassa (sen leveys on 592px 320px:n levyisessä ikkunassa)), ja yksi elementti ulottuu oikean reunan yli: button.instui-button päättyy kohtaan 592px. WCAG 1.4.10 Reflow (taso AA)) vapauttaa kaksiulotteisen sisällön, kuten datataulukot ja kartat, vaatimuksesta, joten käyttäjän tulee arvioida, soveltuuko poikkeus tähän.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Näytönlukuohjelma (simuloitu)	Uudelleenbrändäys (vaalea)	Uudelleenbrändäys (tumma)	Canvas	Canvasin suuri kontrasti
Announcements	Pass	Pass	Pass	Pass

Nämä automaattiset tulokset eivät osoita, että sivu täyttää WCAG-vaatimukset; manuaalinen tarkistus on edelleen tarpeen.

Käytetyt tokenit

Token	Tyyppi	Arvo
--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

Alikomponentit

• button

Liittyvät

• close-button — Kuvakevain sulkupainike.