Button

<button class="btn">Default</button>
<button class="btn color-primary">Primary</button>
<button class="btn color-secondary">Secondary</button>
<button class="btn color-accent">Accent</button>
<button class="btn color-neutral">Neutral</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-base-200 text-base-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Default</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Primary</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-secondary text-secondary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Secondary</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-accent text-accent-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Accent</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-neutral text-neutral-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Neutral</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn color-info">Info</button>
<button class="btn color-success">Success</button>
<button class="btn color-warning">Warning</button>
<button class="btn color-error">Error</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-info text-info-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Info</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-success text-success-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Success</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-warning text-warning-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Warning</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-error text-error-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Error</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn btn-outline">Default</button>
<button class="btn btn-outline color-primary">Primary</button>
<button class="btn btn-outline color-success">Success</button>
<button class="btn btn-outline color-error">Error</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-base-300 bg-transparent text-base-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-base-200/50">Default</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-primary bg-transparent text-primary cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-primary/10">Primary</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-success bg-transparent text-success cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-success/10">Success</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-error bg-transparent text-error cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-error/10">Error</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn btn-soft">Default</button>
<button class="btn btn-soft color-primary">Primary</button>
<button class="btn btn-soft color-success">Success</button>
<button class="btn btn-soft color-warning">Warning</button>
<button class="btn btn-soft color-error">Error</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-primary/15 text-primary cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Default</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-primary/15 text-primary cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Primary</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-success/15 text-success cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Success</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-warning/15 text-warning cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Warning</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-error/15 text-error cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Error</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-ghost color-primary">Primary Ghost</button>
<button class="btn btn-ghost color-error">Error Ghost</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-transparent text-base-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-base-200">Ghost</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-transparent text-primary cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-base-200">Primary Ghost</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-transparent bg-transparent text-error cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] hover:bg-base-200">Error Ghost</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn btn-link">Link</button>
<button class="btn btn-link color-primary">Primary Link</button>
<button class="btn btn-link color-error">Error Link</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium bg-transparent border-transparent text-primary underline underline-offset-2 cursor-pointer select-none whitespace-nowrap transition-all hover:opacity-80">Link</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium bg-transparent border-transparent text-primary underline underline-offset-2 cursor-pointer select-none whitespace-nowrap transition-all hover:opacity-80">Primary Link</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium bg-transparent border-transparent text-error underline underline-offset-2 cursor-pointer select-none whitespace-nowrap transition-all hover:opacity-80">Error Link</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; border-radius: 0.75rem;">
  <button class="btn glass">Glass</button>
  <button class="btn glass btn-outline">Glass Outline</button>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; border-radius: 0.75rem;">
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg text-base-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97] bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border border-glass-border">Glass</button>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn btn-xs color-primary">Extra Small</button>
<button class="btn btn-sm color-primary">Small</button>
<button class="btn color-primary">Default</button>
<button class="btn btn-lg color-primary">Large</button>
<button class="btn btn-xl color-primary">Extra Large</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-6 px-2 text-xs font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Extra Small</button>
<button class="inline-flex items-center justify-center h-8 px-3 text-[0.8125rem] font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Small</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Default</button>
<button class="inline-flex items-center justify-center h-13 px-5 text-base font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Large</button>
<button class="inline-flex items-center justify-center h-15 px-6 text-lg font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Extra Large</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn btn-block color-primary">Block (full width)</button>
<button class="btn btn-circle color-primary">
  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
</button>
<button class="btn btn-square color-neutral">
  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center w-full h-11 px-4 text-sm font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">Block (full width)</button>
<button class="inline-flex items-center justify-center size-11 rounded-full bg-primary text-primary-content cursor-pointer select-none transition-all active:scale-[0.97]">
  <svg class="size-[1.25em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
</button>
<button class="inline-flex items-center justify-center size-11 rounded-lg bg-neutral text-neutral-content cursor-pointer select-none transition-all active:scale-[0.97]">
  <svg class="size-[1.25em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn color-primary">
  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
  Add Item
</button>
<button class="btn btn-outline color-error">
  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
  Delete
</button>
<button class="btn btn-soft color-success">
  Save
  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center gap-1.5 h-11 px-4 text-sm font-medium rounded-lg bg-primary text-primary-content cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">
  <svg class="size-[1.25em] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
  Add Item
</button>
<button class="inline-flex items-center justify-center gap-1.5 h-11 px-4 text-sm font-medium rounded-lg border border-error bg-transparent text-error cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">
  <svg class="size-[1.25em] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
  Delete
</button>
<button class="inline-flex items-center justify-center gap-1.5 h-11 px-4 text-sm font-medium rounded-lg bg-success/15 text-success cursor-pointer select-none whitespace-nowrap transition-all active:scale-[0.97]">
  Save
  <svg class="size-[1.25em] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<button class="btn color-primary btn-loading">Saving...</button>
<button class="btn btn-outline color-primary btn-loading">Loading</button>
<button class="btn btn-soft color-success btn-loading">Processing</button>

Requires: ux.min.css

<!-- Loading state requires the semantic .btn-loading class -->
<!-- or implement a custom spinner overlay -->
<button class="btn color-primary btn-loading">Saving...</button>
<button class="btn btn-outline color-primary btn-loading">Loading</button>
<button class="btn btn-soft color-success btn-loading">Processing</button>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// Add/remove .btn-loading class to toggle the spinner

<button class="btn color-primary" disabled>Disabled</button>
<button class="btn btn-outline color-primary" disabled>Disabled</button>
<button class="btn btn-soft color-primary" disabled>Disabled</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg bg-primary text-primary-content opacity-50 pointer-events-none cursor-default" disabled>Disabled</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg border border-primary bg-transparent text-primary opacity-50 pointer-events-none cursor-default" disabled>Disabled</button>
<button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium rounded-lg bg-primary/15 text-primary opacity-50 pointer-events-none cursor-default" disabled>Disabled</button>

Requires: tw.min.css

// No JavaScript required - use the disabled attribute

<div class="btn-group">
  <button class="btn color-primary">Left</button>
  <button class="btn color-primary">Center</button>
  <button class="btn color-primary">Right</button>
</div>

<div class="btn-group">
  <button class="btn btn-outline color-primary">One</button>
  <button class="btn btn-outline color-primary">Two</button>
  <button class="btn btn-outline color-primary">Three</button>
</div>

Requires: ux.min.css

<div class="inline-flex">
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium bg-primary text-primary-content cursor-pointer rounded-l-lg rounded-r-none">Left</button>
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium bg-primary text-primary-content cursor-pointer rounded-none">Center</button>
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium bg-primary text-primary-content cursor-pointer rounded-r-lg rounded-l-none">Right</button>
</div>

<div class="inline-flex">
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium border border-primary bg-transparent text-primary cursor-pointer rounded-l-lg rounded-r-none">One</button>
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium border border-primary bg-transparent text-primary cursor-pointer rounded-none">Two</button>
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium border border-primary bg-transparent text-primary cursor-pointer rounded-r-lg rounded-l-none">Three</button>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="btn-group-vertical">
  <button class="btn btn-outline color-neutral">Top</button>
  <button class="btn btn-outline color-neutral">Middle</button>
  <button class="btn btn-outline color-neutral">Bottom</button>
</div>

Requires: ux.min.css

<div class="inline-flex flex-col">
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium border border-neutral bg-transparent text-neutral cursor-pointer rounded-t-lg rounded-b-none">Top</button>
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium border border-neutral bg-transparent text-neutral cursor-pointer rounded-none">Middle</button>
  <button class="inline-flex items-center justify-center h-11 px-4 text-sm font-medium border border-neutral bg-transparent text-neutral cursor-pointer rounded-b-lg rounded-t-none">Bottom</button>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component