shelving/ui/form/Button.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement } from "react";
import { type ColorVariants } from "../style/Color.js";
import { type FlexVariants } from "../style/Flex.js";
import { type Status } from "../style/Status.js";
import { type ClickableProps } from "./Clickable.js";
/** Variants for buttons. */
export interface ButtonVariants extends FlexVariants, ColorVariants {
    /** This is the default button in a form and should be displayed stronger. */
    strong?: boolean | undefined;
    /** Add plain styling (background only appears on hover or focus). */
    plain?: boolean | undefined;
    /** Add outline styling (has no background until hover or focus). */
    outline?: boolean | undefined;
    /** Make the button appear smaller. */
    small?: boolean | undefined;
    /** Make the button content-width. */
    fit?: boolean | undefined;
    /** Status colour for the button (e.g. `status="success"`). */
    status?: Status | undefined;
}
interface ButtonProps extends ButtonVariants, ClickableProps {
}
/** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
export declare function Button(props: ButtonProps): ReactElement;
/** Get the full className for a button. */
export declare function getButtonClass({ status, ...variants }: ButtonVariants): string;
export {};