Элементы

Кнопка

Главное и второстепенное действие, опасное действие, малая кнопка, ссылка в виде кнопки.

Примеры

<div class="btns">
  <button class="btn btn--primary" type="button">Сохранить</button>
  <button class="btn btn--ghost" type="button">Отмена</button>
  <button class="btn btn--danger" type="button">Удалить</button>
  <button class="btn btn--warn" type="button">Отозвать</button>
</div>

<div class="btns">
  <button class="btn btn--primary btn--sm" type="button">Малая</button>
  <a class="btn btn--ghost" href="#">Ссылка</a>
  <button class="btn btn--primary" type="button" disabled>Недоступна</button>
</div>

Установка

bukatchuk-ui add button

Файлы

Варианты

Переменные

Вставка для Jekyll

{%- comment -%}
  Кнопка. Параметры: text, href (если задан — ссылка), variant (primary | ghost | danger | warn), size (sm), type.
{%- endcomment -%}
{%- assign variant = include.variant | default: 'ghost' -%}
{%- assign cls = 'btn btn--' | append: variant -%}
{%- if include.size %}{% assign cls = cls | append: ' btn--' | append: include.size %}{% endif -%}
{%- if include.href -%}
<a class="{{ cls }}" href="{{ include.href }}">{{ include.text }}</a>
{%- else -%}
<button class="{{ cls }}" type="{{ include.type | default: 'button' }}">{{ include.text }}</button>
{%- endif -%}

Макрос для Jinja

{#- Кнопка. variant: primary | ghost | danger | warn; size: sm; href превращает её в ссылку. -#}
{% macro button(text, variant='ghost', size=None, href=None, type='button', disabled=False) -%}
{%- set cls = 'btn btn--' ~ variant ~ (' btn--' ~ size if size else '') -%}
{%- if href -%}
<a class="{{ cls }}" href="{{ href }}">{{ text }}</a>
{%- else -%}
<button class="{{ cls }}" type="{{ type }}"{% if disabled %} disabled{% endif %}>{{ text }}</button>
{%- endif -%}
{%- endmacro %}