Кнопки

Явно задайте тип, що відповідає дії кнопки.

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

Використовуйте 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>