@octopusdeploy/design-system-components/dist/src/components/IconButton/DeprecatedIconButton.d.ts

The design systems component library.

import type { AriaAttributes } from "react";
import React from "react";
export interface IconButtonElement {
    focus: () => void;
}
export declare const IconButtonIcons: readonly ["ArrowRefreshIcon", "ArrowDownToSquareIcon", "ArrowUpFromBracketIcon", "CaretDownIcon", "ChevronLeftIcon", "ChevronRightIcon", "ChevronUpIcon", "ChevronDownIcon", "CaretUpIcon", "ChevronsLeftIcon", "CogIcon", "CompressIcon", "CopyIcon", "CurlyBracketsHashtagIcon", "EllipsisVerticalIcon", "EllipsisHorizontalIcon", "ExpandIcon", "EyeOffIcon", "EyeOnIcon", "ImageIcon", "LinkOnIcon", "LinkOffIcon", "MagnifyingGlassIcon", "PenLineIcon", "PlusIcon", "QuestionCircleIcon", "ShareIcon", "TrashIcon", "XmarkIcon"];
export type IconButtonIconType = (typeof IconButtonIcons)[number];
interface SharedButtonProps extends SupportedAriaAttributes {
    /**
     * The classname to apply to the icon button.
     *
     * @deprecated Please avoid using this. If you need to add margin / other layout concerns
     * use a wrapping element instead. This property will be removed in the near future.
     */
    className?: string;
    /**
     * The style to apply to the icon button.
     *
     * @deprecated Please avoid using this. If you need to add margin / other layout concerns
     * use a wrapping element instead. This property will be removed in the near future.
     */
    style?: React.CSSProperties;
    /**
     * A property to control whether the icon button is enabled.
     */
    disabled?: boolean;
    /**
     * A property passed to MUI to control ripple effects.
     */
    disableRipple?: boolean;
    /**
     * The action to perform when the icon button is clicked.
     */
    onClick?: (event: React.MouseEvent) => void;
    /**
     * The accessible name to use for the icon button
     *
     * All icon buttons should have an accessible name as it simply consists of an icon and no label for the accessibility tree.
     * If a predefined icon is used and no accessible name is provided, then the icon name is used for the accessible name.
     */
    accessibleName?: string;
    /**
     * The tabIndex for the DeprecatedIconButton
     *
     * Navigating to the button using Tab can be disabled by providing a value of -1. Any other value for tabIndex should be
     * avoided if possible.
     */
    tabIndex?: number;
}
interface SupportedAriaAttributes {
    /**
     * Indicates whether the icon button is currently expanded or collapsed.
     */
    "aria-expanded"?: AriaAttributes["aria-expanded"];
    /**
     * Identifies the element (or elements) whose contents or presence are controlled by
     * this icon button.
     */
    "aria-controls"?: AriaAttributes["aria-controls"];
    /**
     * Indicates the availability and type of interactive poup element, such as menu or dialog,
     * that can be triggered by this icon button.
     */
    "aria-haspopup"?: AriaAttributes["aria-haspopup"];
}
interface CustomButtonIconProps extends SharedButtonProps {
    /**
     * A custom react element to use for the icon.
     *
     * A custom react elements need to ensure they set the appropriate color
     * for the icon. For all standard icons that we provide, this isn't necessary,
     * however, if you have a custom svg you will need the fill to be set to
     * `currentColor` for the icon to use the correct color.
     *
     * @example
     * <DeprecatedIconButton customIcon={<MyCustomIcon />} onClick={clickHandler} />
     */
    customIcon: React.ReactElement;
}
interface PredefinedButtonIconProps extends SharedButtonProps {
    /**
     * The predefined icon to use as part of the icon button.
     *
     * @example
     * <DeprecatedIconButton icon={"Cancel"} onClick={clickHandler} />
     */
    icon: IconButtonIconType;
}
export type IconButtonProps = CustomButtonIconProps | PredefinedButtonIconProps;
/**
 * @deprecated Please use the new Button component from the design system instead.
 * Deprecated: 03/12/2025
 * Replacement: Button
 * @see https://www.octopus.design/latest/components/actions/button/overview-wdJ4xTRY
 * @see https://design-system-components.octopus.design/?path=/docs/components-button--docs
 * Reason: The Button component now supports icon only buttons and ensures that the button is always accessible.
 */
export declare const DeprecatedIconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<IconButtonElement>>;
export declare function isPredefinedIcon(icon: string): icon is IconButtonIconType;
export default DeprecatedIconButton;