Кнопка

Контракт

:focus-visible — кольцо появляется от клавиатуры и не появляется от мыши. В группе фокусная кнопка поднимается по z-index, чтобы кольцо не срезал сосед.

Подпись каждого варианта проверена на 4.5:1 в пяти темах, а заливка primary ограничена сверху по светлоте, и предел хью-зависимый: 0.545 у петроли, стоящей умолчанием. Цель нажатия — 32px у md и 24px у sm; в плотности compact sm даёт 22px, что ниже 24px по WCAG 2.5.8, и потому compact применяют к плотным табличным видам, а не к основной навигации. Кольцо занятости при prefers-reduced-motion замедляется, но не останавливается: остановленный индикатор сообщает «ничего не происходит», когда происходит.

Варианты

Вариант — это две строки: он меняет только внутренние переменные, а не переписывает правило.

<button class="inst-btn" type="button">По умолчанию</button>
<button class="inst-btn inst-btn--primary" type="button">Primary</button>
<button class="inst-btn inst-btn--soft" type="button">Soft</button>
<button class="inst-btn inst-btn--outline" type="button">Outline</button>
<button class="inst-btn inst-btn--ghost" type="button">Ghost</button>
<button class="inst-btn inst-btn--danger" type="button">Danger</button>

Лестница весов

Вес отвечает на «насколько громко кнопка просит нажать себя», и ответ измерим: присутствие — это площадь, взвешенная шагом светлоты к земле.

Монотонна во всех пяти темах, соседние ступени расходятся не меньше чем на 0.022 — это проверяет cmd/contrast парой «лестница: soft против default». Рамка у outline декоративная, а не несущая.

Тон

Тон — общий словарь кита, тот же, что у бейджа, точки, меры и баннера. Кнопка читает из него --tone-ink для подписи и --tone-bg для наведения.

<button class="inst-btn inst-btn--ghost" type="button" data-tone="running">Добавить контекст</button>
<button class="inst-btn" type="button" data-tone="ok">Принять</button>
<button class="inst-btn" type="button" data-tone="error">Удалить</button>
<button class="inst-btn inst-btn--danger" type="button">Удалить</button>

Последние две строки дают одно и то же: inst-btn--danger — это тот же тон error, записанный классом. Класс остался, потому что разрушительное действие встречается часто и заслуживает короткого написания.

Призрачная с тоном running — то самое действие-ссылка: подпись акцентом, ни рамки, ни заливки. Ею набирают «добавить контекст», «добавить строку», «создать первый объект» — то, что приглашает нажать, но не спорит с главной кнопкой экрана.

Переключатель значения

Есть контрол, у которого главное — значение, а подпись лишь говорит, чего это значение: текущий репозиторий, ветка, окружение, учётная запись. «master» сам по себе не значит ничего, и убрать «Current branch» нельзя.

<button class="inst-btn inst-btn--stacked" type="button" style="inline-size:15rem">
  <svg class="inst-icon" aria-hidden="true"><use href="#i-book"/></svg>
  <span class="inst-btn-stack">
    <span class="inst-btn-label">Текущий репозиторий</span>
    <span class="inst-btn-value">instrument-ui-kit</span>
  </span>
  <svg class="inst-icon inst-icon--sm" aria-hidden="true"><use href="#i-chevron"/></svg>
</button>

Колонкой становится текст, поэтому .inst-btn-stack обязателен: у такого контрола есть ведущая иконка и шеврон, и колонка из всей кнопки положила бы их сверху и снизу. Две строки — свойство этого варианта, а не разрешение переносить любую кнопку.

Кнопка в одежде поля

<button class="inst-btn inst-btn--field" type="button" style="inline-size:18rem">
  <svg class="inst-icon" aria-hidden="true"><use href="#i-list"/></svg>
  Выберите файл или команду
</button>

Открывает палитру или список, но остаётся кнопкой. Вид берётся у вреза, а поведение — кнопочное: рамка здесь несущая, потому что она и есть контрол, внутри одна подсказка.

Ссылкой

Класс на <a> даёт ровно ту же кнопку, без подчёркивания.

<a class="inst-btn" href="#кнопка">Открыть отчёт</a>
<a class="inst-btn inst-btn--primary" href="#кнопка">Перейти к прогону</a>
<button class="inst-btn" type="button">Запустить</button>

Размеры

<button class="inst-btn inst-btn--xs" type="button">xs</button>
<button class="inst-btn inst-btn--sm" type="button">sm</button>
<button class="inst-btn" type="button">md</button>
<button class="inst-btn inst-btn--lg" type="button">lg</button>

Высота приходит из яруса ролей (--control-h-*), поэтому кнопка и стоящее рядом поле того же размера физически не могут разойтись. Плотность контейнера перенастраивает все три размера разом.

xs стоит особняком: бокс у неё от бейджа, а не из яруса контролов, — ниже sm соседом в строке оказывается чип, а не кнопка. Она для контрола, который принадлежит чему-то другому: значки под ответом, настройки сессии под полем ввода. Цель нажатия остаётся --tap-min через псевдоэлемент — рисунок уменьшается, цель нет. Отсюда требование к строке: зазор не меньше --space-3. При compact бокс равен 18px, и на меньшем зазоре увеличенные цели перекрываются. Главная кнопка, стоящая сама по себе, остаётся sm.

Состояния

<button class="inst-btn" type="button">Обычная</button>
<button class="inst-btn" type="button" disabled>Недоступна</button>
<button class="inst-btn inst-btn--primary" type="button" aria-busy="true">Запустить</button>

Занятость

<button class="inst-btn inst-btn--primary" type="button" aria-busy="true">Запустить</button>
<button class="inst-btn" type="button" aria-busy="true">Отмена</button>
<button class="inst-btn inst-btn--icon" type="button" aria-busy="true" aria-label="Обновить">
  <svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg>
</button>

Подпись не убирается из потока, а гасится цветом: ширина держится, и скринридер её по-прежнему читает. Фокус кнопка сохраняет — disabled выбросил бы её из обхода прямо под руками у того, кто пришёл с клавиатуры, — а снимается только мышь: защита от второго нажатия принадлежит обработчику.

С иконкой

<button class="inst-btn" type="button">
  <svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg>
  Обновить
</button>
<button class="inst-btn inst-btn--icon" type="button" aria-label="Обновить">
  <svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg>
</button>

Иконочная кнопка квадратная: ширина берётся из той же высоты контрола, поэтому квадрат держится во всех трёх размерах и при любой плотности.

Композиции

Группа

<div class="inst-btn-group">
  <button class="inst-btn inst-btn--sm" type="button">Слева</button>
  <button class="inst-btn inst-btn--sm" type="button">Центр</button>
  <button class="inst-btn inst-btn--sm" type="button">Справа</button>
</div>

Несколько разных действий, поставленных вплотную, — чем группа отличается от сегментации и от чипа, сказано в индексе раздела.

Сценарии

Полоса действий формы

Главное действие стоит у внешнего края полосы. Здесь полоса прижата к концу строки, поэтому главное идёт последним, а отмена перед ним; при выравнивании к началу порядок обратный — см. форму.

<form class="inst-panel">
  <div class="inst-panel-body">
    <div class="inst-field">
      <label class="inst-label" for="p-name">Имя прогона</label>
      <input class="inst-input" id="p-name" type="text" value="nightly-4127">
    </div>
    <div class="inst-form-actions inst-form-actions--end">
      <button class="inst-btn" type="button">Отмена</button>
      <button class="inst-btn inst-btn--primary" type="submit">Сохранить</button>
    </div>
  </div>
</form>

Действия строки таблицы

Плотный ряд — ghost и sm: рамка у каждой кнопки в таблице превратила бы колонку в решётку. Разрушительное действие рамку сохраняет — это единственное в ряду, которое обязано быть заметно.

<div class="inst-cluster">
  <button class="inst-btn inst-btn--sm inst-btn--ghost" type="button">Открыть</button>
  <button class="inst-btn inst-btn--sm inst-btn--ghost" type="button">Повторить</button>
  <button class="inst-btn inst-btn--sm inst-btn--danger" type="button">Удалить</button>
</div>

Настройка

Свой вариант — две строки. Переопределяются переменные, а не правило.

.my-btn--accent {
  --btn-fg: var(--accent-on);
  --btn-bg: var(--accent-solid);
}

Два ограничения, которые проще нарушить, чем заметить:

• Наведение меняет только --btn-bg. Не переопределяйте background напрямую — переменная перестанет читаться, и вариант потеряет ховер.
• Заливка под белой подписью не может быть светлее предела для своего хью — 0.545 на 215°, 0.568 на 250°, 0.576 на 275°, 0.580 на 45°. Выше этого порога белый текст перестаёт держать 4.5:1. По той же причине --btn-bg-hover уходит от цвета подписи. Зеркальное «в тёмной теме светлее» роняет контраст подписи до 2.61.

API

Связанное

Группа кнопокСегментированный контролМенюТулбарЧипПоле ввода