Кнопки и ссылки

Класс ставится на любой элемент — <button>, <a>, <input type="submit">. Оформление одинаковое, семантику выбирает разметка: то, что отправляет форму, — кнопка; то, что ведёт на другой адрес, — ссылка.

Варианты

<button class="gr-btn gr-btn-primary">Сохранить</button>
<button class="gr-btn gr-btn-secondary">Отмена</button>

Наведение и нажатие

Вариант задаёт цвета четырьмя переменными — --gr-btn-bg, --gr-btn-fg, --gr-btn-border и триплетом --gr-btn-fg-hsl. Состояния :hover и :active написаны один раз на все девять: они кладут поверх фона варианта вуаль из его же цвета текста. Насколько это темнее или светлее, решает действующая тема, а не таблица заготовленных оттенков.

--gr-btn-veil-hover: hsl(var(--gr-btn-fg-hsl), 12%);
--gr-btn-veil-active: hsl(var(--gr-btn-fg-hsl), 24%);

/* вуаль ложится внутренней тенью — поверх фона, но под текстом */
box-shadow: inset 0 0 0 100vmax var(--gr-btn-veil-hover);

Вуаль в 12 % даёт ровно то же, что дало бы смешение 88 % фона с 12 % текста, и не требует color-mix(): альфу приписывают к записи hsl(), поэтому цвет текста варианта продублирован триплетом. Свой цвет вуали задают, переопределив --gr-btn-veil-hover и --gr-btn-veil-active; значение transparent снимает подсветку вовсе — так сделано у .gr-btn-link.

Размеры

Форма

Состояния

Ссылки

Стиль линии

Линия несёт смысл, которого нет у цвета, и переживает чёрно-белую печать. Стиль сочетается с любым вариантом: .gr-link-quiet.gr-link-dotted покажет точки при наведении, .gr-link-muted.gr-link-dashed — пунктир приглушённым цветом.

<a class="gr-link" href="/страница">обычная ссылка</a>

<a class="gr-link gr-link-external" href="https://пример" target="_blank" rel="noopener">
  внешняя<span class="gr-sr-only"> (откроется в новой вкладке)</span>
</a>

Ссылка и кнопка-ссылка — разные вещи

Выбирает разметка, оформление лишь подтверждает выбор. Кнопка, ведущая на другой адрес, ломает Ctrl+клик, среднюю кнопку мыши и контекстное меню «Открыть в новой вкладке»; ссылка, выполняющая действие, отправляет в историю браузера запись, по которой некуда вернуться.

Отступы — утилитами

Своих внешних полей у кнопки нет: расстановка — дело раскладки. Слой griffincss.utils старше griffincss.ui, поэтому любая утилита перекрывает компонент без !important и без гонки специфичностей.

<div class="gr-flex gr-gap">
  <button class="gr-btn gr-btn-primary gr-flex-1">Сохранить</button>
  <button class="gr-btn">Отмена</button>
</div>

Слот под иконку

Своего набора иконок Griffincss не везёт и не будет: набор — отдельный продукт со своим темпом обновления и своей лицензией. Вместо набора библиотека даёт слот и обещание, что иконка в нём встанет правильно с любым набором. Отдельного класса .gr-icon для этого не нужно — и это не экономия, а проверенный результат: всё, что слот должен делать, уже делают сами компоненты.

Что обещает библиотека

Чего библиотека ждёт от иконки

Два набора, ни одного глифа в репозитории

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

Иконочный шрифт. Значок — символ, поэтому кегль и цвет он берёт сам, а от разметки ему нужно только имя класса набора и aria-hidden.

<button class="gr-btn gr-btn-primary">
  <i class="bi bi-download" aria-hidden="true"></i>
  Скачать
</button>

<button class="gr-btn gr-btn-icon" aria-label="Настройки">
  <i class="bi bi-gear" aria-hidden="true"></i>
</button>

Спрайт из <svg>. Размер объявляется атрибутами, цвет — currentColor. Атрибуты, а не класс: без них SVG развернётся во все свои 300×150 px, и произойдёт это ещё до того, как выполнится любой скрипт.

<button class="gr-btn">
  <svg width="16" height="16" fill="currentColor" aria-hidden="true">
    <use href="icons.svg#download"></use>
  </svg>
  Скачать
</button>

Три размера кнопки в этом ряду — проверка обещания «иконка следует кеглю»: ни на одной из них у значка нет своего класса размера.

Примеры использования

Кнопка почти всегда стоит в компании: пара CTA в hero, ряд действий формы, слитая группа-переключатель. Рецепты ниже — три самые частые компании и роли в них; состояние загрузки разобрано на странице Transitions.

Пара CTA: главная и вторая

Первый экран продаёт одно действие — залитая .gr-btn-primary, а второй даёт запасной выход — тихая .gr-btn-ghost со стрелкой. Иерархия строится контрастом заливки, а не размером: обе кнопки .gr-btn-lg и стоят в одном флекс-ряду. На мобильном ряд складывается и кнопки растягиваются: .gr-flex-col .gr-flex-row-sm на контейнере, .gr-w-full .gr-w-auto-sm на кнопках.

<div class="gr-flex gr-flex-col gr-flex-row-sm gr-gap-sm gr-flex-center">
  <button class="gr-btn gr-btn-primary gr-btn-lg gr-w-full gr-w-auto-sm">Попробовать бесплатно</button>
  <button class="gr-btn gr-btn-ghost gr-btn-lg gr-w-full gr-w-auto-sm">Как это работает →</button>
</div>

Кнопка с иконкой и ряд действий

Иконка уточняет глагол: «⬇ Скачать», «+ Добавить». Кнопка уже выравнивает содержимое по центру — иконке хватает быть первым символом или span-ом внутри. В ряду действий формы у каждой кнопки своя роль: опасное действие уводится в начало строки и в .gr-btn-ghost .gr-text-danger, пара «Отмена / Сохранить» дожимается к концу строки через .gr-ms-auto — приём авто-маржина из Spacing.

<div class="gr-flex gr-flex-wrap gr-gap-sm gr-flex-items-center">
  <button class="gr-btn gr-btn-ghost gr-text-danger">Удалить черновик</button>
  <button class="gr-btn gr-ms-auto">Отмена</button>
  <button class="gr-btn gr-btn-primary">⬇ Сохранить</button>
</div>

Группа-переключатель вида

«Список / сетка», «День / Неделя / Месяц» — слитая группа .gr-btn-group: скругления только на внешних углах, границы не удваиваются. Активный сегмент отмечается и стилем (.gr-btn-primary), и семантикой — aria-pressed="true": скринридеру заливка не видна. Капсульный вариант той же задачи — сегмент-контрол — разобран на странице Border Radius.

<div class="gr-btn-group" role="group" aria-label="Вид списка">
  <button class="gr-btn gr-btn-primary" aria-pressed="true">Список</button>
  <button class="gr-btn" aria-pressed="false">Сетка</button>
  <button class="gr-btn" aria-pressed="false">Канбан</button>
</div>