import React from "react"; import { SpaceProps } from "styled-system"; import { IconType } from "../icon"; import { TagProps } from "../../__internal__/utils/helpers/tags/tags"; import { TooltipPositions } from "../tooltip/tooltip.config"; /** * @deprecated Use "primary", "secondary", "tertiary" or "gradient" instead. */ export type DeprecatedButtonTypes = "darkBackground" | "gradient-grey" | "gradient-white"; export type ButtonTypes = "primary" | "secondary" | "tertiary" | DeprecatedButtonTypes; export type SizeOptions = "small" | "medium" | "large"; export type ButtonIconPosition = "before" | "after"; export interface ButtonProps extends SpaceProps, TagProps { /** * Prop to specify the aria-label attribute of the component * Defaults to the iconType, when the component has only an icon */ "aria-label"?: string; /** Identifies the element(s) labelling the button. */ "aria-labelledby"?: string; /** Identifies the element(s) offering additional information about the button the user might require. */ "aria-describedby"?: string; /** * @deprecated Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" * */ buttonType?: ButtonTypes; /** The text the button displays */ children?: React.ReactNode; /** Name attribute */ name?: string; /** Apply disabled state to the button */ disabled?: boolean; /** * @deprecated Apply destructive style to the button * */ destructive?: boolean; /** Apply fullWidth style to the button */ fullWidth?: boolean; /** * @deprecated Used to transform button into anchor * */ href?: string; /** Defines an Icon position related to the children: "before" | "after" */ iconPosition?: ButtonIconPosition; /** [Legacy] Provides a tooltip message when the icon is hovered. */ iconTooltipMessage?: string; /** [Legacy] Provides positioning when the tooltip is displayed. */ iconTooltipPosition?: TooltipPositions; /** Defines an Icon type within the button */ iconType?: IconType; /** id attribute */ id?: string; /** * @deprecated Whether to use the white-on-dark colour variant * */ isWhite?: boolean; /** If provided, the text inside a button will not wrap */ noWrap?: boolean; /** Specify a callback triggered on blur */ onBlur?: (ev: React.FocusEvent) => void; /** Specify a callback triggered on change */ onChange?: (ev: React.FormEvent | React.ChangeEvent) => void; /** Specify a callback triggered on focus */ onFocus?: (ev: React.FocusEvent) => void; /** Specify a callback triggered on keyDown */ onKeyDown?: (ev: React.KeyboardEvent) => void; /** onClick handler */ onClick?: (ev: React.MouseEvent | React.MouseEvent) => void; /** Assigns a size to the button: "small" | "medium" | "large" */ size?: SizeOptions; /** * @deprecated Second text child, renders under main text, only when size is "large" * */ subtext?: string; /** HTML button type property */ type?: string; /** * @deprecated HTML target attribute * */ target?: string; /** * @deprecated HTML rel attribute * */ rel?: string; /** * @private * @internal * @ignore * Set a class name on the button element. INTERNAL USE ONLY. */ className?: string; } /** * @deprecated This version of Button has been deprecated. See the Carbon documentation for migration details. */ declare const Button: React.ForwardRefExoticComponent>; export default Button;