sigpro-ui/docs/components/button copy.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

Live Demo

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

With Loading State

Live Demo

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

  return Button(
    {
      class: "btn 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

Live Demo

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

With Tooltip

Live Demo

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

Disabled State

Live Demo

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

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

All Variants

Live Demo

const VariantsDemo = () => {
  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
    Button({ class: "btn btn-primary" }, "Primary"),
    Button({ class: "btn btn-secondary" }, "Secondary"),
    Button({ class: "btn btn-accent" }, "Accent"),
    Button({ class: "btn btn-ghost" }, "Ghost"),
    Button({ class: "btn btn-outline" }, "Outline"),
  ]);
};
$mount(VariantsDemo, "#demo-variants");

<script> (function() { const initButtonExamples = () => { // 1. Basic Button const basicTarget = document.querySelector('#demo-basic'); if (basicTarget && !basicTarget.hasChildNodes()) { const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me"); $mount(BasicDemo, basicTarget); } // 2. Loading State const loadingTarget = document.querySelector('#demo-loading'); if (loadingTarget && !loadingTarget.hasChildNodes()) { const LoadingDemo = () => { const isSaving = $(false); return Button({ class: "btn btn-success", loading: isSaving, onclick: async () => { isSaving(true); await new Promise(resolve => setTimeout(resolve, 2000)); isSaving(false); } }, "Save Changes"); }; $mount(LoadingDemo, loadingTarget); } // 3. Badge const badgeTarget = document.querySelector('#demo-badge'); if (badgeTarget && !badgeTarget.hasChildNodes()) { const BadgeDemo = () => Button({ class: "btn btn-outline", badge: "3", badgeClass: "badge-accent" }, "Notifications"); $mount(BadgeDemo, badgeTarget); } // 4. Tooltip const tooltipTarget = document.querySelector('#demo-tooltip'); if (tooltipTarget && !tooltipTarget.hasChildNodes()) { const TooltipDemo = () => Button({ class: "btn btn-ghost", tooltip: "Delete item" }, "Delete"); $mount(TooltipDemo, tooltipTarget); } // 5. Disabled State const disabledTarget = document.querySelector('#demo-disabled'); if (disabledTarget && !disabledTarget.hasChildNodes()) { const DisabledDemo = () => { const isDisabled = $(true); return Button({ class: "btn btn-primary", disabled: isDisabled }, "Submit"); }; $mount(DisabledDemo, disabledTarget); } // 6. All Variants const variantsTarget = document.querySelector('#demo-variants'); if (variantsTarget && !variantsTarget.hasChildNodes()) { const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [ Button({ class: "btn btn-primary" }, "Primary"), Button({ class: "btn btn-secondary" }, "Secondary"), Button({ class: "btn btn-accent" }, "Accent"), Button({ class: "btn btn-ghost" }, "Ghost"), Button({ class: "btn btn-outline" }, "Outline") ]); $mount(VariantsDemo, variantsTarget); } }; // Ejecutar la función después de definirla initButtonExamples(); // Registrar para navegación en Docsify if (window.$docsify) { window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => { hook.doneEach(initButtonExamples); }); } })(); </script>