CSS: button-set

.instui-button-set — Состыкованный (плотно, без зазора) ряд кнопок, у которого скруглены только две внешние угловые стороны.

Собственные связанные модификаторы (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) задают значение по умолчанию для каждого дочернего элемента .instui-button без собственного модификатора в той же категории — собственный класс модификатора кнопки всегда имеет приоритет над значением группы. -icon-* всегда задается для каждой кнопки отдельно; его никогда не берут из группы. Устаревшие псевдонимы кнопок (-ghost, -color-primary-inverse) не поддерживаются в качестве модификаторов группы — используйте их канонические замены (-color-tertiary, -on-color) вместо них. Каждый стык образует единственную щель шириной 1 пиксель в цвете собственной рамки кнопок (у сплошных заливок, у которых цвет рамки совпадает с цветом заливки, щель окрашивается цветом надписи). -without-seam предназначен только для группы: он скрывает эту щель, чтобы кнопки выглядели как единый непрерывный элемент управления. Добавьте -width-half к отдельной дочерней кнопке только со значком, чтобы получить триггер split-action шириной в половину стандартного квадрата и высотой с полную кнопку.

Использование

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

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Отмена</button>
  <button class="instui-button -color-primary -icon-checkmark">Подтвердить</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">День</button>
  <button class="instui-button"> Неделя 1</button>
  <button class="instui-button">Месяц</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">Сохранить изменения</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>

Структура

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

Модификаторы

Модификатор	Описание
.-color-ai	Установить по умолчанию для каждого немодифицированного дочернего элемента обработку AI-градиентом.
.-color-ai-secondary	Установить по умолчанию для каждого немодифицированного дочернего элемента менее выраженную AI-обработку.
.-color-danger	Установить по умолчанию для каждого немодифицированного дочернего элемента деструктивный цвет.
.-color-primary	Установить по умолчанию для каждого немодифицированного дочернего элемента основной цвет.
.-color-secondary	Установить по умолчанию для каждого немодифицированного дочернего элемента вторичный цвет.
.-color-success	Установить по умолчанию для каждого немодифицированного дочернего элемента цвет успеха.
.-color-tertiary	Установить по умолчанию для каждого немодифицированного дочернего элемента третичный (стилевой для текста) цвет.
.-condensed	Установить по умолчанию для каждого немодифицированного дочернего элемента более плотные отступы.
.-display-block	Расположить каждый немодифицированный дочерний элемент на всю ширину.
.-on-color	Установить по умолчанию для каждого немодифицированного дочернего элемента вариант размещения на цветной поверхности.
.-shape-circle	Установить по умолчанию для каждого немодифицированного дочернего элемента круглую иконк‑кнопку.
.-shape-square	Установить по умолчанию для каждого немодифицированного дочернего элемента квадратную иконк‑кнопку.
.-size-lg	Установить по умолчанию для каждого немодифицированного дочернего элемента крупный размер.
.-size-md	(по умолчанию) средний размер.
.-size-sm	Установить по умолчанию для каждого немодифицированного дочернего элемента малый размер.
.-toggle	Установить по умолчанию для каждого немодифицированного дочернего элемента поведение переключателя в состоянии нажатия.
.-without-background	Установить по умолчанию для каждого немодифицированного дочернего элемента отсутствие заливки.
.-without-border	Установить по умолчанию для каждого немодифицированного дочернего элемента отсутствие границы.
.-without-seam	Скрыть 1px шов между кнопками.

Псевдоэлементы

Псевдоэлемент	Описание
::after	—
::before	—

Состояния

Состояние	Описание
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Доступность

Используйте группу с подписью для связанных действий; если кнопки представляют варианты переключателя, указывайте состояние каждой с помощью aria-pressed. Задайте кнопкам только со значком доступное имя. Триггеры половинной ширины — узкие цели нажатия (16px, 20px или 24px при стандартных размерах); обеспечьте достаточное расстояние между целями или используйте квадратную кнопку полной ширины для сенсорных интерфейсов.

Правила (axe-core)	Ребрендинг (светлая)	Ребрендинг (тёмная)	Canvas	Холст: высокая контрастность
color-contrastWCAG 2.2 1.4.3	Требуется проверка	Требуется проверка	Требуется проверка	Требуется проверка
	Элементы должны соответствовать минимальным пороговым значениям коэффициента контрастности цветов .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Все сенсорные цели должны иметь размер не менее 24px или располагаться на достаточном расстоянии друг от друга .-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"]

Условия	Ребрендинг (светлая)	Ребрендинг (тёмная)	Canvas	Холст: высокая контрастность
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
	Ребрендинг (светлая): При prefers-contrast: more шесть фрагментов текста не достигают минимального контраста. Худший показатель у «Send» — 1.64:1 (требуется 4.5:1). Ребрендинг (тёмная): При prefers-contrast: more шесть фрагментов текста не достигают минимального контраста. Худший показатель у «Send» — 1.78:1 (требуется 4.5:1). Canvas, Canvas с высокой контрастностью: При prefers-contrast: more два фрагмента текста не достигают минимального контраста. Худший показатель у «Rewrite» — 1.88:1 (требуется 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Не применимо	Pass	Pass	Не применимо
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Не применимо	Не применимо
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	В окне шириной 320px страница прокручивается по горизонтали (её ширина — 592px в окне шириной 320px)), а один элемент выходит за правый край: button.instui-button заканчивается на отметке 592px. WCAG 1.4.10 «Переформатирование» (уровень AA) допускает исключения для двумерного контента, например таблиц данных и карт, поэтому следует оценить, применимо ли это исключение.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Программа чтения с экрана (имитация)	Ребрендинг (светлая)	Ребрендинг (тёмная)	Canvas	Холст: высокая контрастность
Announcements	Pass	Pass	Pass	Pass

Эти автоматизированные результаты не подтверждают соответствие страницы WCAG; по-прежнему требуется ручная проверка.

Использованные токены

Token	Тип	Значение
--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

Подкомпоненты

• button

Связанные

• close-button — Кнопка-dismiss только с иконкой.