@carbon/react/es/components/Button/Button.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import { IconButtonKind } from '../IconButton';
import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
export type ButtonKind = (typeof ButtonKinds)[number];
export declare const ButtonSizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
export type ButtonSize = (typeof ButtonSizes)[number];
export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"];
export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];
export declare const ButtonTooltipPositions: string[];
export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * Specify the message read by screen readers for the danger button variant
     */
    dangerDescription?: string;
    /**
     * Specify if the button is an icon-only button
     */
    hasIconOnly?: boolean;
    /**
     * Optionally specify an href for your Button to become an `<a>` element
     */
    href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
    /**
     * If specifying the `renderIcon` prop, provide a description for that icon that can
     * be read by screen readers
     */
    iconDescription?: string;
    /**
     * Specify whether the Button is expressive, or not. Only applies to the large/default button size.
     */
    isExpressive?: boolean;
    /**
     * Specify whether the Button is currently selected. Only applies to the Ghost variant.
     */
    isSelected?: boolean;
    /**
     * Specify the kind of Button you want to create
     */
    kind?: ButtonBaseProps['hasIconOnly'] extends true ? IconButtonKind : ButtonKind;
    /**
     * Optionally specify a `rel` when using an `<a>` element.
     */
    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
    /**
     * A component used to render an icon.
     */
    renderIcon?: React.ElementType;
    /**
     * Specify the size of the button, from the following list of sizes:
     */
    size?: ButtonSize;
    /**
     * Optionally specify a `target` when using an `<a>` element.
     */
    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
    /**
     * Specify the alignment of the tooltip to the icon-only button.
     * Can be one of: start, center, or end.
     */
    tooltipAlignment?: ButtonTooltipAlignment;
    /**
     * Enable drop shadow for tooltips for icon-only buttons.
     */
    tooltipDropShadow?: boolean;
    /**
     * Enable high-contrast theme for tooltips on icon-only buttons.
     * Defaults to true.
     */
    tooltipHighContrast?: boolean;
    /**
     * Specify the direction of the tooltip for icon-only buttons.
     * Can be either top, right, bottom, or left.
     */
    tooltipPosition?: ButtonTooltipPosition;
}
export type ButtonProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ButtonBaseProps>;
export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>, context?: any) => React.ReactElement | any;
declare const _default: ButtonComponent;
export default _default;