Кнопки

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

Цвета

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<button class="button">Обычная</button>
<button class="button is-primary">Забронировать</button>
<a class="button is-link" href="#menu">Меню</a>
<button class="button is-danger">Отменить</button>

Белая кнопка с рамкой, бирюзовая, синяя ссылка-кнопка и красная. Цветовые модификаторы — те же, что в уроке о цветах: is-primary, is-link, is-info, is-success, is-warning, is-danger, а также is-white, is-light, is-dark, is-black, is-text и is-ghost (кнопка, похожая на ссылку).

Варианты и размеры

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<button class="button is-primary is-light">Подробнее</button>
<button class="button is-danger is-outlined">Удалить</button>
<button class="button is-success is-rounded is-medium">Оплатить</button>
<button class="button is-dark is-fullwidth mt-3">Перейти к оформлению</button>

Светло-бирюзовая, контурная красная, крупная скруглённая зелёная и тёмная на всю ширину.

Состояния

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<button class="button is-primary is-loading">Отправка</button>
<button class="button is-primary" disabled>Мест нет</button>
<button class="button is-static">€24</button>

Первая кнопка вместо текста показывает крутящийся индикатор, вторая бледная и не нажимается, третья выглядит как серая надпись в рамке. is-loading ставят из JavaScript на время запроса к серверу: button.classList.add('is-loading'), а после ответа снимают.

Группа кнопок

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="buttons are-small is-right">
  <button class="button">Отмена</button>
  <button class="button is-primary">Сохранить</button>
</div>
 
<div class="buttons has-addons">
  <button class="button is-selected is-primary">Зал</button>
  <button class="button">Терраса</button>
  <button class="button">Навынос</button>
</div>

Первая группа — две маленькие кнопки у правого края: are-small уменьшает все кнопки сразу, is-right прижимает их вправо. Вторая — три кнопки, склеенные в один переключатель; выбранную отмечают is-selected и цветом.

Кнопка закрытия

Для крестика есть отдельный элемент delete: <button class="delete" aria-label="Закрыть"></button>. Он круглый, серый и пригодится в уведомлениях, метках и модальных окнах.

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

Писать <a class="button" disabled>. Атрибут disabled работает только у <button> и полей формы: ссылка станет бледной, но по ней всё равно можно перейти. Для неактивного действия используйте <button>, а у ссылки уберите href.