CSS: button-set

.instui-button-set — Szew (bez odstępu, stykające się) rząd przycisków, z zaokrąglonymi tylko dwoma zewnętrznymi narożnikami.

Jego własne łączone modyfikatory (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) ustawiają wartość domyślną dla każdego elementu potomnego .instui-button który nie ma własnego modyfikatora w tej samej kategorii — własna klasa modyfikatora przycisku zawsze ma pierwszeństwo przed wartością domyślną grupy. -icon-* zawsze dotyczy pojedynczego przycisku; nigdy nie jest pobierany z grupy. Przestarzałe aliasy przycisków (-ghost, -color-primary-inverse) nie są obsługiwane jako modyfikatory grupy — zamiast nich używaj kanonicznych zamienników (-color-tertiary, -on-color). Każde połączenie tworzy pojedynczą szczelinę o szerokości 1 px w kolorze obramowania przycisków (w przypadku jednolitych wypełnień, których obramowanie ma kolor wypełnienia, szczelina przyjmuje kolor etykiety). -without-seam dotyczy wyłącznie grupy: ukrywa szczelinę, dzięki czemu przyciski wyglądają jak jeden ciągły element sterujący. Umieść -width-half na pojedynczym przycisku potomnym zawierającym tylko ikonę, aby uzyskać wyzwalacz akcji podzielonej o połowie standardowej szerokości kwadratowego przycisku i pełnej wysokości przycisku.

Użycie

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

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Anuluj</button>
  <button class="instui-button -color-primary -icon-checkmark">Potwierdź</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Dzień</button>
  <button class="instui-button"> Tydzień 1</button>
  <button class="instui-button">Miesiąc</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">Zapisz zmiany</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>

Struktura

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

Modyfikatory

Modyfikator	Opis
.-color-ai	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego zastosowanie gradientu AI.
.-color-ai-secondary	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego zastosowanie mniej wyeksponowanego efektu AI.
.-color-danger	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego kolor destrukcyjny.
.-color-primary	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego kolor podstawowy.
.-color-secondary	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego kolor wtórny.
.-color-success	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego kolor sukcesu.
.-color-tertiary	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego kolor trzeciorzędny (w stylu tekstu).
.-condensed	Ustaw domyślnie dla każdego niemodyfikowanego elementu potomnego bardziej zwarte wypełnienie.
.-display-block	Ustaw każdy niemodyfikowany element potomny tak, aby zajmował pełną szerokość.
.-on-color	Ustaw domyślnie każdy niemodyfikowany element potomny do umieszczenia na kolorowym tle.
.-shape-circle	Ustaw domyślnie każdy niemodyfikowany element potomny na okrągły przycisk z ikoną.
.-shape-square	Ustaw domyślnie każdy niemodyfikowany element potomny na kwadratowy przycisk z ikoną.
.-size-lg	Ustaw domyślnie każdy niemodyfikowany element potomny na duży.
.-size-md	(domyślnie) rozmiar średni.
.-size-sm	Ustaw domyślnie każdy niemodyfikowany element potomny na mały.
.-toggle	Ustaw domyślnie każdy niemodyfikowany element potomny na zabieg przełącznika w stanie wciśniętym.
.-without-background	Ustaw domyślnie każdy niemodyfikowany element potomny bez wypełnienia.
.-without-border	Ustaw domyślnie każdy niemodyfikowany element potomny bez obramowania.
.-without-seam	Ukryj 1-pikselową szczelinę między przyciskami.

Pseudo-elementy

Pseudo-element	Opis
::after	—
::before	—

Stany

Stan	Opis
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Dostępność

Używaj grupy z etykietą dla powiązanych działań; gdy przyciski służą do wyboru przełączanego, udostępnij stan każdego z nich za pomocą aria-pressed. Nadaj przyciskom zawierającym tylko ikonę dostępną nazwę. Wyzwalacze o połowie szerokości są wąskimi celami (16px, 20px lub 24px w standardowych rozmiarach); zapewnij odpowiednie odstępy między celami albo w interfejsach dotykowych użyj pełnowymiarowego kwadratowego przycisku.

Zasady (axe-core)	Nowa identyfikacja (jasny)	Nowa identyfikacja (ciemny)	Canvas	Wysoki kontrast płótna
color-contrastWCAG 2.2 1.4.3	Wymaga weryfikacji	Wymaga weryfikacji	Wymaga weryfikacji	Wymaga weryfikacji
	Elementy muszą spełniać minimalne progi współczynnika kontrastu kolorów .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Wszystkie cele dotykowe muszą mieć co najmniej 24px lub należy pozostawić wokół nich wystarczająco dużo miejsca .-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"]

Warunki	Nowa identyfikacja (jasny)	Nowa identyfikacja (ciemny)	Canvas	Wysoki kontrast płótna
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
	Zmiana marki (jasny): Przy prefers-contrast: more sześć fragmentów tekstu ma kontrast poniżej minimum. Najgorszy wynik ma tekst „Wyślij”: 1.64:1 (wymagane 4.5:1). Zmiana marki (ciemny): Przy prefers-contrast: more sześć fragmentów tekstu ma kontrast poniżej minimum. Najgorszy wynik ma tekst „Wyślij”: 1.78:1 (wymagane 4.5:1). Płótno, płótno o wysokim kontraście: Przy prefers-contrast: more dwa fragmenty tekstu mają kontrast poniżej minimum. Najgorszy wynik ma tekst „Przepisz”: 1.88:1 (wymagane 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Nie dotyczy	Pass	Pass	Nie dotyczy
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Nie dotyczy	Nie dotyczy
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	W oknie o szerokości 320px strona przewija się poziomo (ma szerokość 592px w oknie o szerokości 320px)), a jeden element wystaje poza prawą krawędź: button.instui-button kończy się na 592px. WCAG 1.4.10 Reflow (poziom AA)) wyłącza treści dwuwymiarowe, takie jak tabele danych i mapy, dlatego należy ocenić, czy ten wyjątek ma zastosowanie.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Czytnik ekranu (symulowany)	Nowa identyfikacja (jasny)	Nowa identyfikacja (ciemny)	Canvas	Wysoki kontrast płótna
Announcements	Pass	Pass	Pass	Pass

Te zautomatyzowane wyniki nie potwierdzają zgodności strony z WCAG; nadal konieczna jest ręczna weryfikacja.

Zużyte tokeny

Token	Typ	Wartość
--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

Subkomponenty

• button

Powiązane

• close-button — Przycisk zamykający zawierający tylko ikonę.