sigpro-ui/docs/components/button.md

Button(props, children?: string | Signal | [...]): HTMLElement

---

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes (daisyUI)
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

Class Options

For more detailed information about the underlying styling system, visit the daisyUI documentation:

• daisyUI Button

Class Name	Category	Description
btn-neutral	Color 🎨	Neutral brand color
btn-primary	Color 🎨	Primary brand color
btn-secondary	Color 🎨	Secondary brand color
btn-accent	Color 🎨	Accent brand color
btn-info	Color 🎨	Informational blue color
btn-success	Color 🎨	Success green color
btn-warning	Color 🎨	Warning yellow color
btn-error	Color 🎨	Error red color
btn-xl	Size 📏	Extra large scale
btn-lg	Size 📏	Large scale
btn-md	Size 📏	Medium scale (Default)
btn-sm	Size 📏	Small scale
btn-xs	Size 📏	Extra small scale
btn-outline	Style ✨	Transparent with colored border
btn-dash	Style ✨	Dashed border style
btn-soft	Style ✨	Low opacity background color
btn-ghost	Style ✨	No background, hover effect only
btn-link	Style ✨	Looks like a text link
btn-square	Shape 📐	1:1 aspect ratio
btn-circle	Shape 📐	1:1 aspect ratio with rounded corners
btn-wide	Shape 📐	Extra horizontal padding
btn-block	Shape 📐	Full width of container
btn-active	Behavior ⚙️	Forced active/pressed state
btn-disabled	Behavior ⚙️	Visual and functional disabled state

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",
      loading: isSaving,
      onclick: async () => {
        isSaving(true);
        await new Promise((resolve) => setTimeout(resolve, 2000));
        isSaving(false);
      },
    },
    "Save Changes",
  );
};
$mount(LoadingDemo, "#demo-loading");

With Badge

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

With Tooltip

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

Disabled State

const DisabledDemo = () => {
  const isDisabled = $(true);

  return Button(
    {
      class: "btn-primary btn-disabled",
    },
    "Submit",
  );
};
$mount(DisabledDemo, "#demo-disabled");

All 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"),
  ]);
};
$mount(VariantsDemo, "#demo-variants");

const TestDemo = () => {
  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
    $html("span", {class: "indicator"},[
      5,
      Button('Click')])
  ]);
};
$mount(TestDemo, "#demo-test");