CSS: button-set

.instui-button-set — Egy illesztett (szoros, hézagmentes) gombsor, amelynek csak a két külső sarka van lekerekítve.

Saját, egymásba láncolt módosítóik (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) minden gyermeknél alapértelmezett értéket adnak meg .instui-button, amelynek nincs saját módosítója ugyanebben a kategóriában — a gomb saját módosítóosztálya mindig felülírja a csoport alapértelmezett értékét. A -icon-* mindig gombonként értendő; a csoportból soha nem olvasható ki. Az elavult gombaliasok (-ghost, -color-primary-inverse) csoportszintű módosítóként nem támogatottak — használd helyettük a kanonikus megfelelőiket (-color-tertiary, -on-color). Az egyes illesztéseknél egyetlen, 1 px-es varrat látható a gombok saját szegélyszínében (az egyszínű kitöltések, amelyeknél a szegély megegyezik a kitöltéssel, a címke színével árnyalják). -without-seam csak a csoportra érvényes: elrejti ezt a varratot, így a gombok egyetlen folytonos vezérlőelemnek látszanak. Helyezd a -width-half elemet egy különálló, csak ikont tartalmazó gyermekgombra, ha olyan osztott műveletű aktiválót szeretnél, amely a szabványos négyzet szélességének felével és a gomb teljes magasságával rendelkezik.

Használat

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

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Mégse</button>
  <button class="instui-button -color-primary -icon-checkmark">Megerősítés</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Nap</button>
  <button class="instui-button"> 1. hét</button>
  <button class="instui-button">Hónap</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">Változtatások mentése</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>

Struktúra

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

Módosítók

Módosító	Leírás
.-color-ai	Állítsa alapértelmezettként minden módosítatlan gyermeknél az AI gradiens kezelést.
.-color-ai-secondary	Állítsa alapértelmezettként minden módosítatlan gyermeknél az alacsonyabb hangsúlyú AI megjelenést.
.-color-danger	Állítsa alapértelmezettként minden módosítatlan gyermeknél a destruktív (figyelmeztető) színt.
.-color-primary	Állítsa alapértelmezettként minden módosítatlan gyermeknél az elsődleges színt.
.-color-secondary	Állítsa alapértelmezettként minden módosítatlan gyermeknél a másodlagos színt.
.-color-success	Állítsa alapértelmezettként minden módosítatlan gyermeknél a siker (pozitív) színt.
.-color-tertiary	Állítsa alapértelmezettként minden módosítatlan gyermeknél a harmadik (szöveg-stílusú) színt.
.-condensed	Állítsa alapértelmezettként minden módosítatlan gyermeknél a szorosabb belső térközt (padding).
.-display-block	Helyezze minden módosítatlan gyermeket teljes szélességűre.
.-on-color	Állítsa alapértelmezettként minden módosítatlan gyermeket színes felületre történő elhelyezésre.
.-shape-circle	Állítsa alapértelmezettként minden módosítatlan gyermeket kerek ikon-gombra.
.-shape-square	Állítsa alapértelmezettként minden módosítatlan gyermeket négyzet alakú ikon-gombra.
.-size-lg	Állítsa alapértelmezettként minden módosítatlan gyermeket nagy méretre.
.-size-md	(alapértelmezett) közepes méret.
.-size-sm	Állítsa alapértelmezettként minden módosítatlan gyermeket kicsi méretre.
.-toggle	Állítsa alapértelmezettként minden módosítatlan gyermeket a lenyomott állapotú toggle megjelenítésre.
.-without-background	Állítsa alapértelmezettként minden módosítatlan gyermeket kitöltés nélküli megjelenésre.
.-without-border	Állítsa alapértelmezettként minden módosítatlan gyermeket keret nélküli megjelenésre.
.-without-seam	Rejtse el a gombok közötti 1px-es varratot.

Pseudo-elemek

Pseudo-elem	Leírás
::after	—
::before	—

Állapotok

Állapot	Leírás
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Hozzáférhetőség

A kapcsolódó műveletekhez használj címkézett csoportot; ha a gombok választógombként működnek, az egyes állapotokat aria-pressed attribútummal tedd elérhetővé. A csak ikont tartalmazó gomboknak adj hozzáférhető nevet. A fél szélességű aktiválók keskeny célfelületek (16 px, 20 px vagy 24 px a szabványos méreteknél); biztosíts elegendő távolságot a célfelületek között, vagy érintőképernyős felületeken használj teljes szélességű négyzetes gombot.

Szabályok (axe-core)	Újramárkázás (világos)	Újramárkázás (sötét)	Canvas	Canvas nagy kontraszt
color-contrastWCAG 2.2 1.4.3	Felülvizsgálat szükséges	Felülvizsgálat szükséges	Felülvizsgálat szükséges	Felülvizsgálat szükséges
	Az elemeknek meg kell felelniük a minimális színkontraszt-arányra vonatkozó küszöbértékeknek .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Minden érintési célfelület legyen legalább 24 px-es, vagy hagyj körülötte elegendő helyet .-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"]

Feltételek	Újramárkázás (világos)	Újramárkázás (sötét)	Canvas	Canvas nagy kontraszt
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
	Rebrand (világos): Ha a prefers-contrast: more be van kapcsolva, hat szövegrész kontrasztja elmarad a minimumtól. A legrosszabb a „Küldés”: 1.64:1 (legalább 4.5:1 szükséges). Rebrand (sötét): Ha a prefers-contrast: more be van kapcsolva, hat szövegrész kontrasztja elmarad a minimumtól. A legrosszabb a „Küldés”: 1.78:1 (legalább 4.5:1 szükséges). Canvas, Canvas High Contrast: Ha a prefers-contrast: more be van kapcsolva, két szövegrész kontrasztja elmarad a minimumtól. A legrosszabb az „Átírás”: 1.88:1 (legalább 4.5:1 szükséges).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Nem alkalmazható	Pass	Pass	Nem alkalmazható
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Nem alkalmazható	Nem alkalmazható
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	Egy 320px széles ablakban az oldal vízszintesen görgethető (az oldal 592px széles egy 320px-es ablakban), és egy elem túlnyúlik a jobb szélen: button.instui-button 592px-nél ér véget. A WCAG 1.4.10-es, újratördelésre vonatkozó kritériuma (AA szint) kivételt tesz az olyan kétdimenziós tartalmakkal, például adattáblázatokkal és térképekkel, amelyeknél ez indokolt lehet; ezt az embernek kell megítélnie.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Képernyőolvasó (szimulált)	Újramárkázás (világos)	Újramárkázás (sötét)	Canvas	Canvas nagy kontraszt
Announcements	Pass	Pass	Pass	Pass

Ezek az automatizált eredmények nem bizonyítják, hogy az oldal megfelel a WCAG követelményeinek; továbbra is szükség van kézi felülvizsgálatra.

Fogyasztott tokenek

Token	Típus	Érték
--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

Alkomponensek

• button

Kapcsolódó

close-button — Csak ikont tartalmazó bezáró gomb.