@atlaskit/button/dist/types-ts4.5/old-button/types.d.ts

A button triggers an event or action. They let users know what will happen next.

import type React from 'react';
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
export type Spacing = 'compact' | 'default' | 'none';
type Combine<First, Second> = Omit<First, keyof Second> & Second;
export type BaseOwnProps = {
    /**
     * The base styling to apply to the button.
     */
    appearance?: Appearance;
    /**
     * Set the button to autofocus on mount.
     */
    autoFocus?: boolean;
    /**
     * Add a classname to the button.
     */
    className?: string;
    /**
     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
     */
    overlay?: React.ReactNode;
    /**
     * Provides a URL that's used when the button is a link styled as a button.
     */
    href?: string;
    /**
     * Places an icon within the button, after the button's text.
     */
    iconAfter?: React.ReactChild;
    /**
     * Places an icon within the button, before the button's text.
     */
    iconBefore?: React.ReactChild;
    /**
     * Set if the button is disabled.
     */
    isDisabled?: boolean;
    /**
     * Change the style to indicate the button is selected.
     */
    isSelected?: boolean;
    /**
     * Handler called on blur.
     */
    onBlur?: React.FocusEventHandler<HTMLElement>;
    /**
     * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
     */
    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
    /**
     * Handler called on focus.
     */
    onFocus?: React.FocusEventHandler<HTMLElement>;
    /**
     * Set the amount of padding in the button.
     */
    spacing?: Spacing;
    /**
     * Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.
     */
    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
    /**
     * Pass type down to the button.
     */
    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
    /**
     * Option to fit button width to its parent width.
     */
    shouldFitContainer?: boolean;
    /**
     * Text content to be rendered in the button.
     */
    children?: React.ReactNode;
    /**
     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
     */
    testId?: string;
    component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
    /**
     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
     */
    interactionName?: string;
    /**
     * Additional information to be included in the `context` of analytics events that come from button.
     */
    analyticsContext?: Record<string, any>;
};
export type BaseProps = Combine<Combine<Omit<React.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
    'data-testid'?: never;
    'data-has-overlay'?: never;
}>, BaseOwnProps>;
export {};