Кнопки

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

Простая кнопка

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="btn">Войти</button>

Серая кнопка с отступами, скруглением и реакцией на наведение и нажатие. Цвет добавляется модификатором: btn-primary, btn-secondary, btn-error и другие из урока о цветах.

Стили

Помимо обычной заливки у кнопки есть несколько стилей отрисовки:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex flex-wrap gap-2 p-4">
  <button class="btn btn-primary">Записаться</button>
  <button class="btn btn-primary btn-outline">Outline</button>
  <button class="btn btn-primary btn-soft">Soft</button>
  <button class="btn btn-primary btn-dash">Dash</button>
  <button class="btn btn-ghost">Ghost</button>
  <button class="btn btn-link">Link</button>
</div>

Модификатор	Вид	Когда использовать
без стиля	Сплошная заливка	Главное действие
`btn-outline`	Только рамка	Второстепенное действие
`btn-soft`	Бледная заливка	Спокойные кнопки в панелях
`btn-dash`	Пунктирная рамка	«Добавить», пустые места
`btn-ghost`	Без фона до наведения	Кнопки в меню и шапке
`btn-link`	Как ссылка	Действие внутри текста

Размеры и форма

Размеры: btn-xs, btn-sm, btn-lg, btn-xl. Модификаторы формы меняют пропорции:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex flex-wrap items-center gap-2 p-4">
  <button class="btn btn-sm">Маленькая</button>
  <button class="btn btn-lg">Большая</button>
  <button class="btn btn-circle">+</button>
  <button class="btn btn-square">×</button>
  <button class="btn btn-primary btn-wide">Широкая</button>
</div>
<div class="p-4">
  <button class="btn btn-primary btn-block">На всю ширину</button>
</div>

btn-circle и btn-square делают кнопку круглой и квадратной — для значков. btn-wide растягивает её до фиксированной большой ширины, а btn-block — на всю ширину родителя.

Состояния и ссылки

Неактивную кнопку делают обычным атрибутом disabled: daisyUI сам сделает её бледной. Для ссылки, которая должна выглядеть как кнопка, используют <a class="btn">:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex gap-2 p-4">
  <a href="#courses" class="btn btn-primary">Все курсы</a>
  <button class="btn" disabled>Курс закрыт</button>
</div>

Слева ссылка, которая выглядит как кнопка, справа бледная кнопка, на которую нельзя нажать. Выбирайте тег по смыслу: переход на другую страницу — <a>, действие на странице — <button>.

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

Ставить на ссылку класс btn-disabled и считать, что она отключена. Класс делает её бледной и не даёт щёлкнуть мышью, но с клавиатуры — клавишами Tab и Enter — ссылка по-прежнему открывается, а программы чтения с экрана объявляют её обычной ссылкой. У <button> используйте атрибут disabled, а у неактивной ссылки уберите href или замените её на текст.

Спасибо, что читаете!