@atlaskit/button/report.api.md

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

<!-- API Report Version: 2.3 -->

## API Report File for "@atlaskit/button"

> Do not edit this file. This report is auto-generated using
> [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)

### Table of contents

- [Main Entry Types](#main-entry-types)
- [Peer Dependencies](#peer-dependencies)

### Main Entry Types

<!--SECTION START: Main Entry Types-->

```ts
/// <reference types="react" />

import { ComponentType } from 'react';
import { CSSObject } from '@emotion/react';
import { jsx } from '@emotion/react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { ThemeModes } from '@atlaskit/theme/types';
import { ThemeModes as ThemeModes_2 } from '@atlaskit/theme';
import { ThemeProp } from '@atlaskit/theme/components';
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';

// @public (undocumented)
export type Appearance =
	| 'danger'
	| 'default'
	| 'link'
	| 'primary'
	| 'subtle'
	| 'subtle-link'
	| 'warning';

// @public (undocumented)
export type BaseOwnProps = {
	appearance?: Appearance;
	autoFocus?: boolean;
	className?: string;
	overlay?: React_2.ReactNode;
	href?: string;
	iconAfter?: React_2.ReactChild;
	iconBefore?: React_2.ReactChild;
	isDisabled?: boolean;
	isSelected?: boolean;
	onBlur?: React_2.FocusEventHandler<HTMLElement>;
	onClick?: (e: React_2.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
	onFocus?: React_2.FocusEventHandler<HTMLElement>;
	spacing?: Spacing;
	target?: React_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
	type?: React_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
	shouldFitContainer?: boolean;
	children?: React_2.ReactNode;
	testId?: string;
	component?: React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>> | React_2.ElementType;
	interactionName?: string;
	analyticsContext?: Record<string, any>;
};

// @public (undocumented)
export type BaseProps = Combine<
	Combine<
		Omit<React_2.AllHTMLAttributes<HTMLElement>, 'disabled'>,
		{
			'data-testid'?: never;
			'data-has-overlay'?: never;
		}
	>,
	BaseOwnProps
>;

// @public
const Button: React_2.MemoExoticComponent<
	React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>
>;
export default Button;

// @public (undocumented)
export function ButtonGroup({ appearance, children }: ButtonGroupProps): jsx.JSX.Element;

// @public (undocumented)
type ButtonGroupProps = {
	appearance?: Appearance;
	children?: React_2.ReactNode;
};

// @public (undocumented)
export interface ButtonProps extends BaseProps {}

// @public (undocumented)
type Combine<First, Second> = Omit<First, keyof Second> & Second;

// @public
export const CustomThemeButton: React_2.MemoExoticComponent<
	React_2.ForwardRefExoticComponent<
		Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps & React_2.RefAttributes<HTMLElement>
	>
>;

// @public (undocumented)
export type CustomThemeButtonOwnProps = {
	isLoading?: boolean;
	theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
};

// @public (undocumented)
export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;

// @public (undocumented)
export type InteractionState =
	| 'active'
	| 'default'
	| 'disabled'
	| 'focus'
	| 'focusSelected'
	| 'hover'
	| 'selected';

// @public
export const LoadingButton: React_2.ForwardRefExoticComponent<
	Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps & React_2.RefAttributes<HTMLElement>
>;

// @public (undocumented)
export type LoadingButtonOwnProps = {
	isLoading?: boolean;
};

// @public (undocumented)
export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;

// @public (undocumented)
export type Spacing = 'compact' | 'default' | 'none';

// @public (undocumented)
export const Theme: {
	Consumer: ComponentType<
		{
			children: (tokens: ThemeTokens) => ReactNode;
		} & Partial<CustomThemeButtonProps> & {
				state: InteractionState;
				iconIsOnlyChild?: boolean | undefined;
				mode?: ThemeModes_2 | undefined;
			}
	>;
	Provider: ComponentType<{
		children?: ReactNode;
		value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
	}>;
	useTheme: (props: ThemeProps) => ThemeTokens;
};

// @public (undocumented)
export type ThemeProps = Partial<CustomThemeButtonProps> & {
	state: InteractionState;
	iconIsOnlyChild?: boolean;
	mode?: ThemeModes;
};

// @public (undocumented)
export type ThemeTokens = {
	buttonStyles: CSSObject;
	spinnerStyles: CSSObject;
};

// (No @packageDocumentation comment for this package)
```

<!--SECTION END: Main Entry Types-->

### Peer Dependencies

<!--SECTION START: Peer Dependencies-->

```json
{
	"react": "^16.8.0"
}
```

<!--SECTION END: Peer Dependencies-->