import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Button Component","description":"","frontmatter":{},"headers":[],"relativePath":"ui/button.md","filePath":"ui/button.md"}'),h={name:"ui/button.md"};function l(e,s,k,p,d,E){return a(),t("div",null,[...s[0]||(s[0]=[n(`

Button Component

The _button component creates reactive buttons with built-in support for loading states, icons, badges, and disabled states.

Basic Usage

javascript

_button({ onclick: () => alert('Clicked!') }, 'Click Me')

Loading State

The $loading signal automatically shows a spinner and disables the button.

javascript

const $loading = $(false)

_button({ 
  $loading: $loading,
  onclick: async () => {
    $loading(true)
    await saveData()
    $loading(false)
  }
}, 'Save')

Icons

Add icons to buttons using the icon prop.

javascript

_button({ icon: '⭐' }, 'Favorite')
_button({ icon: '💾' }, 'Save')
_button({ icon: '🗑️', class: 'btn-error' }, 'Delete')

Badges

Add badges to buttons for notifications or status indicators.

javascript

_button({ badge: '3' }, 'Notifications')
_button({ badge: 'New', badgeClass: 'badge-secondary' }, 'Update Available')

Button Variants

Use daisyUI classes to style your buttons.

javascript

_button({ class: 'btn-primary' }, 'Primary')
_button({ class: 'btn-secondary' }, 'Secondary')
_button({ class: 'btn-outline' }, 'Outline')
_button({ class: 'btn-sm' }, 'Small')

Counter Example

javascript

const $count = $(0)

_button({ 
  onclick: () => $count($count() + 1),
  icon: '🔢'
}, () => \`Count: \${$count()}\`)

Async Action Example

javascript

const $saving = $(false)
const $success = $(false)

_button({ 
  $loading: $saving,
  icon: '💾',
  onclick: async () => {
    $saving(true)
    await saveToDatabase()
    $saving(false)
    $success(true)
    setTimeout(() => $success(false), 2000)
  }
}, 'Save')

API Reference

Prop	Type	Description
`$loading`	`Signal<boolean>`	Shows spinner and disables button
`$disabled`	`Signal<boolean>`	Disables the button
`icon`	`string \| Node`	Icon to display before text
`badge`	`string`	Badge text to display
`badgeClass`	`string`	Additional CSS classes for badge
`class`	`string \| function`	Additional CSS classes
`onclick`	`function`	Click event handler
`type`	`string`	Button type ('button', 'submit', etc.)

`,29)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};

Button Component ​

Basic Usage ​

Loading State ​

Icons ​

Badges ​

Button Variants ​

Counter Example ​

Async Action Example ​

API Reference ​

Button Component

Basic Usage

Loading State

Icons

Badges

Button Variants

Counter Example

Async Action Example

API Reference