@eccenca/gui-elements/dist/types/components/Button/Button.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { AnchorButtonProps as BlueprintAnchorButtonProps, ButtonProps as BlueprintButtonProps, Intent as BlueprintIntent } from "@blueprintjs/core";
import { ValidIconName } from "../Icon/canonicalIconNames";
import { BadgeProps } from "./../Badge/Badge";
import { TooltipProps } from "./../Tooltip/Tooltip";
interface AdditionalButtonProps {
    /**
     * Always use this when the button triggers an affirmative action, e.g. confirm a process.
     * The button is displayed with accent color intent.
     */
    affirmative?: boolean;
    /**
     * Always use this when the button triggers an disruptive action, e.g. delete or remove.
     * The button is displayed with danger color intent.
     */
    disruptive?: boolean;
    /**
     * Use this when a button is important enough to highlight it in a set of other buttons.
     * The button is displayed with accent color intent.
     */
    elevated?: boolean;
    /**
     * Intent state visualized by color.
     */
    intent?: BlueprintIntent | "accent";
    /**
     * Content displayed in a badge that is attached to the button.
     * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
     * Use `badgeProps` to change that default behaviour.
     */
    badge?: BadgeProps["children"];
    /**
     * Object with additional properties for the badge.
     */
    badgeProps?: Partial<Omit<BadgeProps, "children">>;
    /**
     * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
     */
    tooltip?: string | JSX.Element | null;
    /**
     * Object with additional properties for the tooltip.
     */
    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
    /**
     * Icon displayed on button start.
     */
    icon?: ValidIconName | JSX.Element;
    /**
     * Icon displayed on button end.
     */
    rightIcon?: ValidIconName | JSX.Element;
}
interface ExtendedButtonProps extends AdditionalButtonProps, Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {
}
interface ExtendedAnchorButtonProps extends AdditionalButtonProps, Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {
}
export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
/**
 * Display a button element to enable user interaction.
 * It normally should trigger action when clicked.
 */
export declare const Button: ({ children, className, affirmative, disruptive, elevated, icon, rightIcon, tooltip, tooltipProps, badge, badgeProps, intent, ...restProps }: ButtonProps) => React.JSX.Element;
export default Button;