monday-ui-react-core/dist/mocked_classnames_esm/components/IconButton/IconButton.d.ts

Official monday.com UI resources for application development in React.js

import React, { AriaAttributes } from "react";
import { TooltipProps } from "../Tooltip/Tooltip";
import { Size } from "./services/IconButton-helpers";
import { SubIcon, VibeComponent, VibeComponentProps } from "../../types";
import { ButtonColor, ButtonType } from "../Button/ButtonConstants";
export interface IconButtonProps extends VibeComponentProps {
    /**
     * id to be added to the element
     */
    id?: string;
    /**
     * callback function when clicking the icon button
     */
    onClick?: (event: React.MouseEvent) => void;
    /**
     * the class name of the button wrapper
     */
    wrapperClassName?: string;
    /**
     * the class name of the button icon
     */
    iconClassName?: string;
    /**
     * Icon to be rendered
     */
    icon?: SubIcon;
    /**
     * element id to describe the button accordingly
     * */
    ariaLabeledBy?: string;
    /**
     * a11y property to be added, used for screen reader to know what kind of button it is
     */
    ariaLabel?: string;
    /**
     * aria for a button popup
     */
    ariaHasPopup?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
    /**
     * a11y property to be added, used for screen reader to know if the button is expanded
     */
    ariaExpanded?: boolean;
    /**
     * aria controls - receives id for the controlled region
     */
    ariaControls?: string;
    "aria-describedby"?: AriaAttributes["aria-describedby"];
    /**
     * a11y property to be added, used for screen reader to know if the button is hidden
     */
    "aria-hidden"?: AriaAttributes["aria-hidden"];
    /**
     * Indicates the current "pressed" state of toggle buttons
     */
    "aria-pressed"?: AriaAttributes["aria-pressed"];
    /**
     * Size of the icon
     */
    size?: Size;
    /**
     * Whether the tooltip should be displayed or not
     */
    hideTooltip?: boolean;
    /**
     * Props for Tooltip component
     */
    tooltipProps?: Partial<TooltipProps>;
    /**
     * Tooltip wraps the button icon, it will display in the tooltip, if not present the aria label will be shown
     */
    tooltipContent?: string;
    /**
     * Kind of button - like <Button />
     */
    kind?: ButtonType;
    active?: boolean;
    /** The button's color  */
    color?: ButtonColor;
    /**
     * disabled state
     */
    disabled?: boolean;
    /**
     * if disabled - this will be shown in the tooltip
     */
    disabledReason?: string;
    /**
     * @deprecated - use "data-testid" instead
     */
    dataTestId?: string;
    /** Change the focus indicator from around the button to within it */
    insetFocus?: boolean;
    /** Specifies the tab order of an element */
    tabIndex?: number;
    /** Show a loader instead of the icon  */
    loading?: boolean;
}
declare const _default: ((VibeComponent<IconButtonProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{
    sizes: {
        readonly SMALL: "small";
        readonly MEDIUM: "medium";
        readonly LARGE: "large";
        readonly XXS: "xxs";
        readonly XS: "xs";
    };
    kinds: typeof ButtonType;
    colors: typeof ButtonColor;
}>) | (React.FC<IconButtonProps & React.RefAttributes<HTMLElement>> & Partial<{
    sizes: {
        readonly SMALL: "small";
        readonly MEDIUM: "medium";
        readonly LARGE: "large";
        readonly XXS: "xxs";
        readonly XS: "xs";
    };
    kinds: typeof ButtonType;
    colors: typeof ButtonColor;
}>)) & {
    sizes: {
        readonly SMALL: "small";
        readonly MEDIUM: "medium";
        readonly LARGE: "large";
        readonly XXS: "xxs";
        readonly XS: "xs";
    };
    kinds: typeof ButtonType;
    colors: typeof ButtonColor;
};
export default _default;