shelving/ui/form/Button.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getColorClass } from "../style/Color.js";
import { getFlexClass } from "../style/Flex.js";
import { getStatusClass } from "../style/Status.js";
import { getClass, getModuleClass } from "../util/css.js";
import BUTTON_CSS from "./Button.module.css";
import { Clickable } from "./Clickable.js";
/** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
export function Button(props) {
    return _jsx(Clickable, { ...props, className: getButtonClass(props) });
}
/** Get the full className for a button. */
export function getButtonClass({ status, ...variants }) {
    return getClass(getModuleClass(BUTTON_CSS, "button", variants), getFlexClass(variants), status && getStatusClass(status), getColorClass(variants));
}