Button

Stable

A comprehensive button component with multiple styling variants, sizes, and modifiers based on DaisyUI.

API Reference

Attribute	Description	Type	Default
`color`	Sets the button color theme	string	`""`
`variant`	Controls button style appearance	string	`""` (solid)
`size`	Defines button size	string	`md`
`active`	Shows button in active/pressed state	boolean	`False`
`loader`	Shows loading spinner (HTMX aware)	boolean	`False`
`wide`	Makes button wider with extra padding	boolean	`False`
`block`	Makes button full width (100%)	boolean	`False`
`square`	Makes button square shaped	boolean	`False`
`circle`	Makes button circular	boolean	`False`
`hx`	HTMX event integration for server-side reactivity	string	`""`

color

neutral primary secondary accent info success warning error

variant

outline dash soft ghost link link-inline

size

xs sm md lg xl

Disabled state: use the bare disabled attribute rather than styling alone. This prevents keyboard focus and announces the state to screen readers.

Loading state: when loader is set, the button shows a spinner. Consider also adding aria-busy="true" and aria-label="Loading..." to announce the loading state to screen readers.

Icon-only buttons: when using square or circle variants with only an icon inside, add an aria-label to describe the action (e.g. aria-label="Close").

Link variant: variant="link-inline" renders a button that looks like a hyperlink. Ensure the surrounding context makes it clear this is an interactive element, not just styled text.

Examples

Usage

<c-button color="primary">Click me</c-button>

Colors

<c-button color="primary">Primary</c-button>
<c-button color="secondary">Secondary</c-button>
<c-button color="success">Success</c-button>
<c-button color="error">Error</c-button>

Style Variants

Default

<c-button color="primary">Primary</c-button>

Outline

<c-button color="primary" variant="outline">Primary</c-button>

Dash

<c-button color="primary" variant="dash">Primary</c-button>

Soft

<c-button color="primary" variant="soft">Primary</c-button>

Ghost

<c-button color="primary" variant="ghost">Primary</c-button>

Sizes

<c-button color="primary" size="xs">XS</c-button>
<c-button color="primary" size="sm">SM</c-button>
<c-button color="primary" size="lg">LG</c-button>
<c-button color="primary" size="xl">XL</c-button>

Layout Modifiers

Wide

<c-button color="primary" wide>Wide Button</c-button>

Block (Full Width)

<c-button color="secondary" block>Block Button</c-button>

Square & Circle

<c-button color="primary" square>+</c-button>
<c-button color="error" circle>×</c-button>

States

<c-button color="success" active>Active</c-button>
<c-button color="warning" disabled>Disabled</c-button>
<c-button color="primary" loader>Loading</c-button>

Link Variants

Text with an inside it.

<c-button variant="link">Button as Link</c-button>
<p>Text with an <c-button variant="link-inline">inline link button</c-button> inside it.</p>

Alpine.js Usage

Reactive client-side behavior with conditional rendering and event handling.

<div x-data='{ count: 0 }'>
  <template x-if="count > 3">
    <c-button color="secondary" @click="count--">
      Counter: <span x-text="count"></span>
    </c-button>
  </template>
  <template x-if="count <= 3">
    <c-button color="primary" @click="count++">
      Counter: <span x-text="count"></span>
    </c-button>
  </template>
</div>