Кнопки

Кнопки — основной элемент взаимодействия пользователя с интерфейсом. Photon предлагает более 20 вариантов кнопок: цветовые стили, размеры, контурные, стеклянные, с иконками и многое другое.

Цветовые стили

Используйте модификаторы btn--primary, btn--success, btn--warning, btn--error, btn--info для быстрого изменения цвета кнопки.

<button class="btn btn--primary">Primary</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--warning">Warning</button>
<button class="btn btn--error">Error</button>
<button class="btn btn--info">Info</button>
<button class="btn btn--light">Light</button>
<button class="btn btn--dark">Dark</button>
<button class="btn">Default</button>

Контурные кнопки

Добавьте модификатор --outline для создания контурных кнопок с прозрачным фоном.

<button class="btn btn--outline">Outline</button>
<button class="btn btn--outline btn--primary">Primary outline</button>
<button class="btn btn--outline btn--success">Success outline</button>
<button class="btn btn--outline btn--warning">Warning outline</button>
<button class="btn btn--outline btn--error">Error outline</button>
<button class="btn btn--outline btn--info">Info outline</button>

Стеклянные кнопки

Модификатор --glass создаёт эффект матового стекла с размытием фона.

<button class="btn btn--glass">Glass</button>
<button class="btn btn--glass btn--primary">Glass primary</button>
<button class="btn btn--glass btn--success">Glass success</button>
<button class="btn btn--glass btn--warning">Glass warning</button>
<button class="btn btn--glass btn--error">Glass error</button>

Размеры кнопок

Управляйте размером с помощью модификаторов btn--sm, btn--lg.

<button class="btn btn--primary btn--sm">Маленькая</button>
<button class="btn btn--primary">Обычная</button>
<button class="btn btn--primary btn--lg">Большая</button>

Кнопка на всю ширину

Добавьте класс btn--block чтобы кнопка заняла всю доступную ширину.

<button class="btn btn--primary btn--block">Кнопка на всю ширину</button>
<button class="btn btn--success btn--block btn--sm">Маленькая блочная</button>
<button class="btn btn--outline btn--block">Блочная контурная</button>

Кнопки с иконками

Поместите SVG или текст иконки внутри кнопки для наглядного действия.

<button class="btn btn--primary">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:1em;height:1em;">
    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
    <circle cx="12" cy="7" r="4"/>
  </svg>
  Профиль
</button>
<button class="btn btn--success">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:1em;height:1em;">
    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
    <polyline points="22 4 12 14.01 9 11.01"/>
  </svg>
  Сохранить
</button>
<button class="btn btn--error">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:1em;height:1em;">
    <polyline points="3 6 5 6 21 6"/>
    <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
  </svg>
  Удалить
</button>

Состояния кнопок

Кнопки могут быть отключены с помощью атрибута disabled или класса btn--loading для состояния загрузки.

<button class="btn btn--primary" disabled>Отключена</button>
<button class="btn btn--success" disabled>Неактивна</button>
<button class="btn btn--outline" disabled>Отключена</button>
<button class="btn btn--primary btn--loading">Загрузка...</button>

Группы кнопок

Оберните несколько кнопок в контейнер с классом btn-group для объединения их в одну группу.

<div class="btn-group">
  <button class="btn btn--primary">Левый</button>
  <button class="btn btn--primary">Центр</button>
  <button class="btn btn--primary">Правый</button>
</div>
<div class="btn-group">
  <button class="btn btn--outline btn--primary">Да</button>
  <button class="btn btn--outline btn--primary">Нет</button>
  <button class="btn btn--outline btn--primary">Возможно</button>
</div>

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

Любую кнопку можно превратить в ссылку — просто используйте тег <a> вместо <button>. Все модификаторы .btn--* работают одинаково.

Primary ссылка Success ссылка Outline ссылка Ghost ссылка Link стиль Маленькая ссылка Большая ссылка

<a href="#" class="btn btn--primary">Primary ссылка</a>
<a href="#" class="btn btn--success">Success ссылка</a>
<a href="#" class="btn btn--outline btn--primary">Outline ссылка</a>
<a href="#" class="btn btn--ghost">Ghost ссылка</a>
<a href="#" class="btn btn--link">Link стиль</a>
<a href="#" class="btn btn--primary btn--sm">Маленькая ссылка</a>
<a href="#" class="btn btn--primary btn--lg">Большая ссылка</a>