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["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; /** * 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