Кнопки и роли

Любой <button> в Pico уже оформлен: основной цвет, скругление, отступы, заметная рамка фокуса. Варианты задаются несколькими классами, а особое поведение — атрибутами доступности: role сообщает браузеру и программам чтения с экрана, чем элемент является, а aria-* — в каком он состоянии.

Варианты кнопок

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<button>Подписаться</button>
<button class="secondary">Позже</button>
<button class="contrast">Резюме</button>
<button class="outline">Все проекты</button>
<button class="outline secondary">Отмена</button>
<button disabled>Недоступно</button>

В превью — голубая, серая и тёмная кнопки, две кнопки с контуром и бледная неактивная. Классы складываются: outline secondary даёт серый контур.

Ссылка в виде кнопки

Когда кнопка ведёт на другую страницу, это ссылка, а не <button>. Атрибут role="button" придаёт ссылке вид кнопки, при этом она остаётся ссылкой:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<a href="#" role="button">Читать блог</a>
<a href="#" role="button" class="outline">Портфолио</a>

Две ссылки выглядят как кнопки. Те же классы вариантов работают и здесь.

Группа кнопок и загрузка

Атрибут role="group" на обёртке склеивает кнопки в одну полосу. Атрибут aria-busy="true" показывает крутящийся индикатор — так кнопка сообщает, что действие выполняется:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div role="group">
  <button>Все</button>
  <button class="secondary">CSS</button>
  <button class="secondary">HTML</button>
</div>
<button id="save">Сохранить черновик</button>
 
<script>
  const save = document.querySelector('#save');
  save.addEventListener('click', () => {
    save.setAttribute('aria-busy', 'true');
    save.textContent = 'Сохраняю…';
    setTimeout(() => {
      save.removeAttribute('aria-busy');
      save.textContent = 'Сохранено';
      console.log('Черновик сохранён');
    }, 1500);
  });
</script>

Сверху три кнопки-фильтра единой полосой. Нажмите «Сохранить черновик»: полторы секунды в кнопке крутится индикатор, затем надпись меняется, а под примером появляется сообщение.

Подсказка

Атрибут data-tooltip показывает всплывающую подсказку при наведении, data-placement="bottom" переносит её вниз:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<p style="margin-top: 3rem">
  <button data-tooltip="Файл PDF, 120 КБ">Скачать резюме</button>
</p>

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

Частая ошибка

Сделать кнопкой <div> с обработчиком клика и role="button". Выглядеть он будет как кнопка, но с клавиатуры не нажимается: на него нельзя перейти клавишей Tab и нажать Enter. Для действий берите <button>, для переходов — <a href>, а role="button" ставьте только на ссылки.