NurOSNupek

Button

Кнопка Nupek - primary, secondary и ghost, с минимальной высотой 44px и состоянием disabled.

Button - единственный компонент для действий на странице. Три варианта покрывают разный уровень значимости действия на экране.

Варианты

  • Primary - заливка ink (в тёмной теме - светлый текст-токен), текст surface. Одно основное действие на экран или секцию.
  • Secondary - обводка ink, прозрачный фон. Действие второго уровня рядом с primary.
  • Ghost - текст signal, без фона и обводки. Второстепенные действия внутри плотных списков и панелей.

Состояния

Кнопка имеет минимальную высоту 44px независимо от варианта - это area нажатия, а не только видимый размер. Отключённая кнопка (disabled) получает непрозрачность 40% и не реагирует на клик и наведение.

Разметка

<button class="btn btn-primary">Сохранить</button>
<a class="btn btn-secondary" href="/foundations/color">Смотреть токены</a>
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

Элемент - <button> для действия на текущей странице, <a> для перехода по ссылке. Тег зависит от смысла действия, а не от визуального варианта: primary, secondary и ghost одинаково работают и как кнопка, и как ссылка.