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

<script type="module"> import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'; import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm'; const Demo = () => { return Button({ class: "btn-primary" }, "Click Me"); }; $mount(Demo, "#demo-basic"); </script>

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

With Loading State

<script type="module"> import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'; import { Button } from '../../sigpro-ui/sigpro-ui.js'; const isSaving = $(false); const Demo = () => { return Button({ class: "btn-success", loading: isSaving, onclick: async () => { isSaving(true); await new Promise(resolve => setTimeout(resolve, 2000)); isSaving(false); } }, "Save Changes"); }; $mount(Demo, "#demo-loading"); </script>

const isSaving = $(false);

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

With Badge

<script type="module"> import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'; import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm'; const Demo = () => { return Button({ class: "btn-outline", badge: "3", badgeClass: "badge-accent" }, "Notifications"); }; $mount(Demo, "#demo-badge"); </script>

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

With Tooltip

<script type="module"> import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'; import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm'; const Demo = () => { return Button({ class: "btn-ghost", tooltip: "Delete item" }, "Delete"); }; $mount(Demo, "#demo-tooltip"); </script>

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

Disabled State

<script type="module"> import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'; import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm'; const isDisabled = $(true); const Demo = () => { return Button({ class: "btn-primary", disabled: isDisabled }, "Submit"); }; $mount(Demo, "#demo-disabled"); </script>

const isDisabled = $(true);

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

All Variants

<script type="module"> import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm'; import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm'; const isLoading = $(false); const Demo = () => { return 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"), Button({ class: "btn-success", loading: isLoading, onclick: () => { isLoading(true); setTimeout(() => isLoading(false), 1500); } }, "Loading") ]); }; $mount(Demo, "#demo-variants"); </script>

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")
])

## Ventajas de este enfoque:

1. **Ejecución real** - Los ejemplos son interactivos y funcionales
2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción

## Consejos adicionales:

Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:

```css
/* En tu HTML, dentro de <style> */
.demo-container {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
}