Add Button component with badge and tooltip support

Implement a Button component with optional badge and tooltip.
This commit is contained in:
Natxo
2026-03-31 12:05:22 +02:00
committed by GitHub
parent ab01398878
commit 10a3f971d9

39
src/components/button.js Normal file
View File

@@ -0,0 +1,39 @@
import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** BUTTON */
export const Button = (props, children) => {
const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
const btn = $html(
"button",
{
...rest,
// Usamos props.class directamente
class: joinClass("btn", props.class),
disabled: () => val(loading) || val(props.disabled),
},
[
() => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
icon ? $html("span", { class: "mr-1" }, icon) : null,
children,
]
);
let out = btn;
if (badge) {
out = $html("div", { class: "indicator" }, [
$html(
"span",
{ class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
badge
),
out,
]);
}
return tooltip
? $html("div", { class: "tooltip", "data-tip": tooltip }, out)
: out;
};