Buttons

A button is the most common interface component, and in daisyUI it starts with the btn class. You can put it on a <button>, on an <a> link and even on an <input type="submit"> — they will all look the same.

A simple button

<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">Log in</button>

A grey button with padding, rounded corners and a response to hover and press. Color comes from a modifier: btn-primary, btn-secondary, btn-error and the others from the colors lesson.

Styles

Besides the regular fill, a button has several drawing styles:

<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">Enroll</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>

Modifier	Look	When to use
no style	Solid fill	The main action
`btn-outline`	Border only	A secondary action
`btn-soft`	Pale fill	Quiet buttons in panels
`btn-dash`	Dashed border	"Add", empty slots
`btn-ghost`	No background until hover	Buttons in menus and headers
`btn-link`	Like a link	An action inside text

Sizes and shape

Sizes: btn-xs, btn-sm, btn-lg, btn-xl. Shape modifiers change the proportions:

<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">Small</button>
  <button class="btn btn-lg">Large</button>
  <button class="btn btn-circle">+</button>
  <button class="btn btn-square">×</button>
  <button class="btn btn-primary btn-wide">Wide</button>
</div>
<div class="p-4">
  <button class="btn btn-primary btn-block">Full width</button>
</div>

btn-circle and btn-square make the button round or square — for icons. btn-wide stretches it to a fixed large width, and btn-block to the full width of its parent.

States and links

A disabled button uses the regular disabled attribute: daisyUI makes it pale by itself. For a link that should look like a button, use <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">All courses</a>
  <button class="btn" disabled>Course closed</button>
</div>

On the left is a link that looks like a button, on the right a pale button you cannot press. Pick the tag by meaning: going to another page is an <a>, an action on the page is a <button>.

Common mistake

Putting btn-disabled on a link and assuming it is disabled. The class makes it pale and blocks mouse clicks, but from the keyboard — with Tab and Enter — the link still opens, and screen readers announce it as a regular link. Use the disabled attribute on a <button>, and for an inactive link remove the href or replace it with text.

Thanks for reading!