Button

A versatile button component with support for different variants, icons, and states.

<c-button>Default Button</c-button>

Component API

Property	Type	Default	Description
`variant`	`string`	`neutral`	Button style: primary, secondary, accent, neutral, outline, ghost, error, warning, success, info
`href`	`string`	`-`	URL to navigate to (renders as link styled as button)
`icon`	`string`	`-`	Icon name to display at the beginning of the button
`icon_trailing`	`string`	`-`	Icon name to display at the end of the button
`square`	`boolean`	`false`	Make button square (automatically applied for icon-only buttons)
`spinner`	`boolean`	`false`	Show standard loading spinner
`spinner_icon`	`string`	`-`	Icon name to use as animated spinner
`modal`	`string`	`-`	Modal ID to open on click
`class`	`string`	`-`	Additional CSS classes (btn-sm, btn-lg, etc.)
`disabled`	`boolean`	`false`	Disable the button

Examples

Button Variants

The button component supports multiple style variants via the variant prop.

<c-button>Default</c-button>
<c-button variant="primary">Primary</c-button>
<c-button variant="secondary">Secondary</c-button>
<c-button variant="accent">Accent</c-button>
<c-button variant="neutral">Neutral</c-button>
<c-button variant="outline">Outline</c-button>
<c-button variant="ghost">Ghost</c-button>

Button Sizes

Different sizes are available by adding the appropriate DaisyUI classes.

<c-button class="btn-xs" variant="primary">Extra Small</c-button>
<c-button class="btn-sm" variant="primary">Small</c-button>
<c-button variant="primary">Normal</c-button>
<c-button class="btn-lg" variant="primary">Large</c-button>

Button as Link

Transform a button into a link by using the href prop. The button will render as an anchor tag styled like a button.

Go to Demo External Link Internal Link

<c-button variant="primary" href="/demo/">Go to Demo</c-button>
<c-button variant="outline" href="https://github.com" icon_trailing="external-link">External Link</c-button>
<c-button variant="ghost" href="#section">Internal Link</c-button>

Buttons with Icons

Add icons to your buttons with the icon prop for leading icons, or icon_trailing for trailing icons.

<!-- Leading icons -->
<c-button variant="primary" icon="plus">Add</c-button>
<c-button variant="secondary" icon="pencil">Edit</c-button>

<!-- Trailing icons -->
<c-button variant="primary" icon_trailing="arrow-right">Next</c-button>
<c-button variant="secondary" icon_trailing="external-link">Open Link</c-button>

Square and Icon-only Buttons

Create square buttons with the square prop, or let them be automatically square when they contain only an icon.

<!-- Explicit square with text -->
<c-button variant="primary" square icon="plus">+</c-button>

<!-- Auto square (icon only, no text) -->
<c-button variant="secondary" icon="pencil"></c-button>
<c-button variant="error" icon="trash"></c-button>

<!-- Manual square without icon -->
<c-button variant="outline" square>SQ</c-button>

Loading States

Display a loading indicator with the spinner prop. Try clicking the buttons below to see the spinners in action with HTMX.

<!-- Basic spinner -->
<c-button variant="primary" spinner="true">Loading...</c-button>

<!-- Custom spinner with icon -->
<c-button variant="secondary" spinner_icon="refresh">Refresh</c-button>

<!-- With HTMX integration -->
<c-button variant="primary" spinner="true" 
          hx-get="/api/some-action/" 
          hx-target="#result">
    Process Data
</c-button>

Modal Integration

Open a modal directly with the modal prop.

<c-button variant="primary" modal="my_modal">Open Modal</c-button>

Disabled State

Disable a button by adding the disabled attribute.

<c-button variant="primary" disabled>Disabled</c-button>
<c-button variant="outline" disabled>Disabled Outline</c-button>

Appendix

Using Buttons with HTMX

HTMX Integration

Spinners automatically display during HTMX requests thanks to the htmx-indicator class.

Custom Classes

Use the class prop to add DaisyUI classes like btn-sm, btn-lg, or btn-wide.

Tungsten UI 💡