sigpro-ui/docs/components/button.md

Button

---

Props

Prop	Type	Description
class	string	Additional CSS classes
loading	boolean | Signal<boolean>	Shows a spinner and disables the button
disabled	boolean | Signal<boolean>	Disabled state
icon	string | VNode | Signal	Icon displayed before the text
onclick	function	Click event handler
type	string	Native button type ('button', 'submit', 'reset')

---

Classes (daisyUI)

Category	Keywords	Description
Color	btn-primary, btn-secondary, btn-accent, btn-ghost, btn-info, btn-success, btn-warning, btn-error	Visual color variants
Size	btn-xs, btn-sm, btn-md, btn-lg, btn-xl	Button scale
Style	btn-outline, btn-soft, btn-dash, btn-link	Visual style variants
Shape	btn-circle, btn-square, btn-wide, btn-block	Button shape
State	btn-active, btn-disabled	Forced visual states

SigProUI supports styling via daisyUI independently or combined with the ui prop. For further details, check the daisyUI Button Documentation – Full reference for CSS classes.

Example

button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
// Applies: primary color, large size, circular shape
// class is any css class from pure css or favorite framework

---

Examples

Basic Button

const BasicDemo = () => {
  return button({ class: "btn-primary" }, "Click Me");
};
mount(BasicDemo, "#demo-basic");

With Loading State

const LoadingDemo = () => {
  const isSaving = $(false);

  return button(
    {
      class: "btn-success",
      disabled: isSaving,
      onclick: async () => {
        isSaving(true);
        await new Promise((resolve) => setTimeout(resolve, 2000));
        isSaving(false);
      },
    },
    [when(isSaving, ()=>Loading()), "Save Changes"],
  );
};
mount(LoadingDemo, "#demo-loading");

With Icon

const IconDemo = () => {
  return div({ class: "flex flex-wrap gap-2 justify-center" }, [
    button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
  ]);
};
mount(IconDemo, "#demo-icon");

With Badge (using Indicator)

const BadgeDemo = () => {
  return Indicator(
    { value: "3", class: "badge-accent" },
    button({ class: "btn-outline" }, "Notifications"),
  );
};
mount(BadgeDemo, "#demo-badge");

With Tooltip

const TooltipDemo = () => {
  return Tooltip(
    { tip: "Delete item" },
    button({ class: "btn-ghost" }, "Delete"),
  );
};
mount(TooltipDemo, "#demo-tooltip");

Combined (Badge + Tooltip)

const CombinedDemo = () => {
  const count = $(0);
  return Tooltip(
    { tip: () => `${count()} likes` },
    Indicator(
      { value: count, class: "badge-accent" },
      button(
        {
          class: "btn-primary btn-lg",
          onclick: () => count(count() + 1),
        },
        ["👍", "Like", Icon("icon-[lucide--heart]")],
      ),
    ),
  );
};
mount(CombinedDemo, "#demo-combined");

All Color Variants

const VariantsDemo = () => {
  return div({ class: "flex flex-wrap gap-2 justify-center" }, [
    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"),
    button({ class: "btn-disabled" }, "Disabled"),
  ]);
};
mount(VariantsDemo, "#demo-variants");