Кнопки

Явно задайте тип, соответствующий действию кнопки.

#Типы нативных кнопок

Используйте type="button" для отдельного действия, type="submit" для отправки формы и type="reset" для восстановления исходных значений.

<button type="button">Предпросмотр</button>
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>

Соответствующие нативные элементы ввода тоже получают стили кнопок.

<input type="button" value="Предпросмотр" />
<input type="submit" value="Отправить" />
<input type="reset" value="Сбросить" />

#Недоступность и выполнение операции

Атрибут disabled блокирует нажатие. Кнопка button с aria-busy="true" показывает индикатор загрузки. Добавьте disabled, если действие должно быть недоступно во время операции.

<button type="button" disabled>Недоступно</button>
<button type="button" aria-busy="true" disabled>Сохранение</button>

Цвета, отступы и типографику можно настроить с помощью токенов кнопок.

#Классы расширений

Полная сборка добавляет цветовые варианты, контуры, размеры и стили иконок. Цвет, контур и размер можно сочетать на одной кнопке.

#Кнопки с заливкой

Используйте trace-primary для основного действия, trace-secondary для вспомогательного и trace-danger для разрушительного.

<button type="button" class="trace-primary">Основная</button>
<button type="button" class="trace-secondary">Дополнительная</button>
<button type="button" class="trace-danger">Опасное действие</button>

#Кнопки с контуром

Используйте trace-outline для контура по умолчанию. Добавьте цветовой класс, чтобы изменить цвет контура.

<button type="button" class="trace-outline">Обычный контур</button>
<button type="button" class="trace-primary trace-outline">Основной контур</button>
<button type="button" class="trace-secondary trace-outline">Дополнительный контур</button>
<button type="button" class="trace-danger trace-outline">Контур опасного действия</button>

#Размеры

Используйте trace-small для маленькой кнопки и trace-large для большой. Средний размер применяется по умолчанию.

<button type="button" class="trace-small">Малый</button>
<button type="button">Средний</button>
<button type="button" class="trace-large">Большой</button>

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

Оберните SVG из Lucide в trace-icon и поместите перед подписью или после неё. Для кнопки с одной иконкой используйте trace-icon-only и задайте доступное имя атрибутом aria-label.

<button type="button" class="trace-primary">
  <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="M12 5v14" />
</svg>
</span>
  Добавить элемент
</button>
<button type="button" class="trace-secondary trace-outline">
  Продолжить
  <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="m12 5 7 7-7 7" />
</svg>
</span>
</button>
<button type="button" class="trace-icon-only" aria-label="Добавить элемент">
  <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="M12 5v14" />
</svg>
</span>
</button>