sigpro-ui/docs/components/button.md

Button

Styled button with full DaisyUI support and reactive states.

Tag

Button

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
disabled	boolean | Signal<boolean>	false	Disabled state
loading	boolean | Signal<boolean>	false	Shows loading spinner
badge	string | Signal<string>	-	Badge text displayed on corner
badgeClass	string	'badge-secondary'	Badge styling classes
tooltip	string | Signal<string>	-	Tooltip text on hover
icon	string | VNode | Signal	-	Icon displayed before text
onclick	function	-	Click event handler
type	string	'button'	Native button type

Live Examples

Basic Button

Button({ class: "btn-primary" }, "Click Me")

With Loading State

const isSaving = $(false);

Button({
  class: "btn-success",
  loading: isSaving,
  onclick: async () => {
    isSaving(true);
    await saveData();
    isSaving(false);
  }
}, "Save Changes")

With Badge

Button({
  class: "btn-outline",
  badge: "3",
  badgeClass: "badge-accent"
}, "Notifications")

With Tooltip

Button({
  class: "btn-ghost",
  tooltip: "Delete item"
}, "Delete")

Disabled State

const isDisabled = $(true);

Button({
  class: "btn-primary",
  disabled: isDisabled
}, "Submit")

All Variants

Div({ class: "flex flex-wrap gap-2" }, [
  Button({ class: "btn-primary" }, "Primary"),
  Button({ class: "btn-secondary" }, "Secondary"),
  Button({ class: "btn-accent" }, "Accent"),
  Button({ class: "btn-ghost" }, "Ghost"),
  Button({ class: "btn-outline" }, "Outline")
])