@mskcc/carbon-react/lib/components/Button/Button.d.ts

Carbon react components for the MSKCC DSM

/**
 * MSKCC DSM 2021, 2024
 */
import React from 'react';
import { PolymorphicProps } from '../../types/common';
import { MskIconId } from '../Icon/MskIcon';
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 ["sm", "md", "lg"];
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 declare const ButtonIconPositions: string[];
export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
export type ButtonIconPosition = (typeof ButtonIconPositions)[number];
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?: string;
    /**
     * If specifying the `renderIcon` prop, provide a description for that icon that can
     * be read by screen readers
     */
    iconDescription?: string;
    /**
     * Specify the position of the icon with a label button. If hasIconOnly is true, position will be ignored.
     */
    iconPosition?: ButtonIconPosition;
    /**
     * Specify whether the Button is expressive, or not
     */
    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?: ButtonKind;
    /**
     * Optional prop to allow overriding the icon rendering.
     * Can be a React component class
     */
    renderIcon?: React.ElementType;
    /**
     * Select an icon from the msk icon offering
     */
    icon?: MskIconId;
    /**
     * Specify the size of the button, from the following list of sizes:
     */
    size?: ButtonSize;
    /**
     * Specify the alignment of the tooltip to the icon-only button.
     * Can be one of: start, center, or end.
     */
    tooltipAlignment?: ButtonTooltipAlignment;
    /**
     * Specify the direction of the tooltip for icon-only buttons.
     * Can be either top, right, bottom, or left.
     */
    tooltipPosition?: ButtonTooltipPosition;
    /**
     * Specify the width of the button
     */
    width?: 'content' | 'full';
    /**
     * Specify an optional className to be added to your Icon Only Tooltip wrapper
     */
    wrapperClasses?: string;
    /**
     * Specify whether the tooltip should be disabled
     */
    disableTooltip?: boolean;
    /**
     * Specify whether the button should be disabled from focus
     */
    disableFocus?: boolean;
}
export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
export interface ButtonComponent {
    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
}
declare const _default: ButtonComponent;
export default _default;