Кнопка

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

Минимальная кнопка — один класс и обязательный type.

<button class="inst-btn" type="button">Отмена</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" type="button">По умолчанию</button>
<button class="inst-btn inst-btn--primary" type="button">Primary</button>
<button class="inst-btn inst-btn--ghost" type="button">Ghost</button>
<button class="inst-btn inst-btn--danger" type="button">Danger</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-*), поэтому кнопка и стоящее рядом поле того же размера физически не могут разойтись. Плотность контейнера перенастраивает все три размера разом.

Состояния

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

Четыре решения, каждое из которых легко сделать наоборот и получить дефект:

• Подпись не убирается из потока, а гасится цветом. Ширина кнопки остаётся прежней. Иначе полоса действий дёргается в тот момент, когда пользователь смотрит на курсор.
• Подпись остаётся в разметке — её читает скринридер, и запасной aria-label не нужен.
• Кнопка сохраняет фокус. disabled выбросил бы её из порядка обхода прямо под руками у того, кто пришёл с клавиатуры.
• Кит снимает только мышь (pointer-events). Защита от повторного нажатия — в обработчике: это поведение, а не оформление.

С иконкой

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

Иконочная кнопка квадратная. Прямоугольник 32×28 — самый частый признак самодельного кита. Ширина берётся из той же высоты контрола, поэтому квадрат сохраняется во всех трёх размерах и во всех плотностях.

Композиции

Группа

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

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

Шов группы — снятая рамка у соседа, а не отрицательное поле в -0.5px: браузер никогда не рисует рамку тоньше физического пикселя, поэтому сдвиг на полпикселя оставлял видимое утолщение на каждом стыке.

Сценарии

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

Главное действие последнее, отмена перед ним, обе прижаты к дальнему краю.

<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">
      <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.56 по OKLCH. Выше этого порога белый текст перестаёт держать 4.5:1. По той же причине --btn-bg-hover уходит от цвета подписи. Зеркальное «в тёмной теме светлее» роняет контраст подписи до 2.61.

API

Связанное

Группа кнопок Сегментированный контрол Иконка Меню Полоса действий формы