Анатомия UI-компонента: кнопка, поле, карточка и их состояния

Кнопка «Записаться» встречается на сайте в десятке мест: в шапке, на карточке услуги, в форме, в модальном окне. Если каждый раз её рисуют заново, через пару месяцев в продукте живут пять разных синих кнопок с разными отступами, радиусами и оттенками. Компонент решает эту проблему: элемент описывают один раз — части, варианты, состояния, правила применения, — а дальше только используют.

Для дизайнера компонент — мастер-элемент в макете: в Figma он так и называется, component, а его копии на экранах — instances. Для разработчика это код с параметрами, например <Button variant="primary" size="m">. Договор работает, когда обе стороны называют одно и то же одинаково: те же варианты, те же состояния, те же имена свойств. Набор компонентов называют UI-kit, а UI-kit вместе с токенами, правилами и документацией — дизайн-системой.

Анатомия — это разбор компонента на именованные части. Названия нужны не ради терминологии: когда в спецификации написано «в состоянии error меняется только рамка контейнера», разработчик точно знает, какое свойство трогать. Apple в Human Interface Guidelines описывает кнопку тремя атрибутами: стиль (размер, цвет, форма), содержимое (иконка, текст или оба) и роль (смысл действия: основное, отмена, удаление).

Размер области нажатия — тоже часть анатомии. Apple рекомендует для кнопки область не меньше 44×44 pt. WCAG 2.2 в критерии 2.5.8 (уровень AA) требует, чтобы цель для указателя была не меньше 24×24 CSS-пикселей, с оговорёнными в стандарте исключениями. Видимая часть может быть компактнее, но кликабельная область — нет.

Вариант — заранее определённая версия компонента для действий разной важности. У кнопки обычно три-четыре уровня заметности:

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

Размеры (S, M, L) меняют высоту, внутренние отступы и кегль, но не смысл. Их удобно брать из той же шкалы отступов, что и весь интерфейс (о шкале — в уроке про визуальную иерархию). Для основного действия на телефоне выбирайте размер, у которого область нажатия не меньше рекомендованной платформой.

Состояние — то, как компонент выглядит и ведёт себя в данный момент. Для пользователя это ответ на вопрос «меня поняли?». Nielsen Norman Group советует не задерживать отклик: фокус и нажатие должны отображаться примерно за 100–150 мс, иначе люди жмут повторно.

Про фокус. Псевдокласс :focus срабатывает при любом фокусе, а :focus-visible — только когда браузер решает, что фокус нужно показать: при переходе клавишей Tab — да, при клике мышью по кнопке — обычно нет. Это позволяет дать клавиатуре заметный контур и не мешать им тем, кто кликает. Убирать индикатор совсем нельзя: MDN прямо предупреждает, что без него навигация с клавиатуры становится недоступной для зрячих пользователей.

Про disabled. Атрибут disabled у <button> браузер обрабатывает сам: кнопка не нажимается и выпадает из порядка Tab. Критерий WCAG 1.4.11 освобождает неактивные компоненты от требования контраста 3:1, но подпись всё равно должна читаться. Если недоступная кнопка должна оставаться в фокусе, используют aria-disabled="true" — тогда блокировать нажатие и стилизовать состояние придётся самостоятельно.

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Состояния кнопки</title>
  <link rel="stylesheet" href="button.css">
</head>
<body>
  <form id="booking">
    <button class="btn btn--primary" type="submit">Записаться</button>
    <button class="btn btn--secondary" type="button">Позвонить</button>
    <button class="btn btn--ghost" type="button">Отмена</button>
    <button class="btn btn--primary" type="button" disabled>Нет свободных окон</button>
    <p id="status" role="status"></p>
  </form>

  <script>
    const form = document.getElementById("booking");
    const submit = form.querySelector('[type="submit"]');
    const status = document.getElementById("status");

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      if (submit.getAttribute("aria-busy") === "true") return; // уже отправляем
      submit.setAttribute("aria-busy", "true");
      status.textContent = "Отправляем заявку…";
      await new Promise((resolve) => setTimeout(resolve, 1500)); // вместо запроса
      submit.removeAttribute("aria-busy");
      status.textContent = "Заявка отправлена";
    });
  </script>
</body>
</html>

:root {
  --brand: #1d4ed8;
  --brand-hover: #1e40af;
  --brand-active: #1e3a8a;
  --brand-tint: #eff6ff;
  --on-brand: #ffffff;
  --muted-bg: #e5e7eb;
  --muted-text: #4b5563;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 16px/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 100ms ease-out;
}

/* Варианты: один и тот же компонент, разная заметность */
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--secondary { background: transparent; color: var(--brand); border-color: currentColor; }
.btn--ghost { background: transparent; color: var(--brand); }

/* Hover и active — только у доступной кнопки */
.btn--primary:not(:disabled, [aria-busy="true"]):hover { background: var(--brand-hover); }
.btn--secondary:not(:disabled, [aria-busy="true"]):hover,
.btn--ghost:not(:disabled, [aria-busy="true"]):hover { background: var(--brand-tint); }
.btn--primary:not(:disabled, [aria-busy="true"]):active { background: var(--brand-active); }
.btn:not(:disabled, [aria-busy="true"]):active { transform: translateY(1px); }

/* Фокус с клавиатуры: контур не меньше 3:1 к фону страницы */
.btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Disabled: приглушён, но подпись читается */
.btn:disabled {
  background: var(--muted-bg);
  color: var(--muted-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* Loading: кнопка остаётся в фокусе, повторные нажатия игнорирует скрипт */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn[aria-busy="true"]::before { animation-duration: 2s; }
}

Атрибут aria-busy="true" сообщает вспомогательным технологиям, что содержимое элемента обновляется; здесь он же служит хуком для стиля спиннера. Сам он ничего не объявляет: результат зачитывает область role="status" — её текст экранные дикторы озвучивают, не перенося фокус.

Мы прогнали эти шаги автоматически в Microsoft Edge 155 через Playwright: все состояния переключаются, контраст подписи к фону — не ниже 4,5:1 во всех состояниях, включая disabled, контур фокуса к белому фону — 6,7:1.

Поле ввода состоит из подписи (label), самого поля, подсказки под ним и места для сообщения об ошибке. Самая частая ошибка в макетах — убрать подпись и оставить только серый текст внутри поля, placeholder. Nielsen Norman Group разбирает, почему это вредит:

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

Вывод Nielsen Norman Group: подпись и важную подсказку лучше размещать вне поля. Placeholder допустим как пример формата («+7 700 000 00 00»), но не вместо подписи.

Nielsen Norman Group определяет карточку как контейнер для нескольких коротких связанных фрагментов информации — краткое представление объекта со ссылкой на подробности. Типичные части: изображение, заголовок, короткое описание, мета (дата, цена, теги) и иногда второстепенное действие.

Чаще всего вся карточка ведёт на страницу объекта: большая область нажатия удобнее на телефоне и для мыши. Но внутри бывают свои кнопки — «В избранное», «Поделиться». Обернуть всю карточку в ссылку <a> и положить внутрь кнопку нельзя: HTML запрещает вкладывать интерактивные элементы в ссылку. Рабочий приём — ссылкой делают заголовок, а её область нажатия растягивают на всю карточку через CSS; второстепенные кнопки ставят поверх этого слоя.

У карточки те же состояния, что у кнопки, плюс свои: hover (тень или подъём), focus-visible, selected — если карточки выбирают, как тарифы, — и loading, когда вместо неё временно стоит skeleton. Nielsen Norman Group напоминает и об ограничении: карточки хороши для просмотра разнородного контента, но плохо подходят, когда варианты нужно сравнивать между собой, — там удобнее список или таблица.

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