@atlaskit/button 17.9.0 → 17.11.0

package/dist/types/containers/button-group.d.ts

@@ -4,11 +4,11 @@ import { jsx } from '@emotion/react';
 import { Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
-     * The appearance to apply to all buttons
+     * The appearance to apply to all buttons.
      */
     appearance?: Appearance;
     /**
-     * The buttons to render inside the Button Group
+     * The buttons to render inside the button group.
      */
     children?: React.ReactNode;
     /**
@@ -16,12 +16,12 @@ export type ButtonGroupProps = {
      */
     testId?: string;
     /**
-     * Refers to an aria-label attribute. Sets an accessible name for ButtonGroup wrapper to announce it to users of assistive technology.
+     * Refers to an `aria-label` attribute. Sets an accessible name for the button group wrapper to announce it to users of assistive technology.
      * Usage of either this, or the `titleId` attribute is strongly recommended.
      */
     label?: string;
     /**
-     * Id referenced by the ButtonGroup wrapper's aria-labelledby attribute. This id should be assigned to the group-button title element.
+     * ID referenced by the button group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group-button title element.
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;

package/dist/types/new-button/variants/default/types.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

package/dist/types/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, interactionName, autoFocus, appearance, spacing, isDisabled, isSelected, icon, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, shape, testId, UNSAFE_size, href, "aria-label": preventedAriaLabel, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types/new-button/variants/icon/types.d.ts

@@ -1,9 +1,8 @@
+/// <reference types="react" />
+import { TooltipProps } from '@atlaskit/tooltip';
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
+    'aria-label'?: never;
     /**
      * The button style variation.
      */
@@ -12,11 +11,18 @@ export type CommonIconButtonProps = {
      * Places an icon within the button.
      */
     icon: IconProp;
+    /**
+     * Conditionally show a spinner over the top of a button.
+     */
+    isLoading?: boolean;
+    /**
+     * Prevent a tooltip from showing. Use sparingly.
+     */
+    isTooltipDisabled?: boolean;
     /**
      * Provide an accessible label, often used by screen readers.
      */
-    label: string;
-    'aria-label'?: never;
+    label: React.ReactNode;
     /**
      * Set the shape of the icon, defaults to square with rounded corners.
      */
@@ -25,6 +31,10 @@ export type CommonIconButtonProps = {
      * Controls the amount of padding in the button.
      */
     spacing?: IconButtonSpacing;
+    /**
+     * Props passed down to the Tooltip component.
+     */
+    tooltip?: Partial<Omit<TooltipProps, 'children'>>;
     /**
      * Set the size of the icon. `medium` is default, so it does not need to be specified.
      * This is UNSAFE as it will be removed in future in favor of a 100% bounded API.

package/dist/types/new-button/variants/icon/use-icon-button.d.ts

@@ -1,6 +1,6 @@
 import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
 import { type CommonIconButtonProps } from './types';
-type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & CommonIconButtonProps;
+type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & Omit<CommonIconButtonProps, 'isTooltipDisabled' | 'tooltip'>;
 type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
 /**
  * __Use icon button__

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -16,6 +16,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     appearance?: Appearance;
     children: React.ReactNode;
     spacing?: Spacing;
+    isLoading?: boolean;
 } & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: ReturnType<typeof xcss>;
@@ -36,5 +37,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types/new-button/variants/shared/xcss.d.ts

@@ -7,6 +7,7 @@ export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
+    isLoading: boolean;
     isSelected: boolean;
     isHighlighted: boolean;
     isActiveOverSelected: boolean;
@@ -29,4 +30,4 @@ export type GetXCSSArgs = {
      */
     isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isLoading, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

package/dist/types/new-button/variants/types.d.ts

@@ -67,6 +67,10 @@ export type AdditionalButtonVariantProps = {
      * The button style variation.
      */
     appearance?: ButtonAppearance;
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
 };
 /**
  * Combines common button props with additional HTML attributes

package/dist/types/old-button/types.d.ts

@@ -5,85 +5,85 @@ 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
+     * The base styling to apply to the button.
      */
     appearance?: Appearance;
     /**
-     * Set the button to autofocus on mount
+     * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
     /**
-     * Add a classname to the button
+     * Add a classname to the button.
      */
     className?: string;
     /**
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
      */
     overlay?: React.ReactNode;
     /**
-     * Provides a url for buttons being used as a link
+     * 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
+     * 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
+     * Places an icon within the button, before the button's text.
      */
     iconBefore?: React.ReactChild;
     /**
-     * Set if the button is disabled
+     * Set if the button is disabled.
      */
     isDisabled?: boolean;
     /**
-     * Change the style to indicate the button is selected
+     * Change the style to indicate the button is selected.
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur
+     * Handler to be called on blur.
      */
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     * Handler to be 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 to be called on focus
+     * Handler to be called on focus.
      */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Set the amount of padding in the button
+     * Set the amount of padding in the button.
      */
     spacing?: Spacing;
     /**
-     * Pass target down to a link within the button component, if a href is provided
+     * 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 a button
+     * Pass type down to the button.
      */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /**
-     * Option to fit button width to its parent width
+     * Option to fit button width to its parent width.
      */
     shouldFitContainer?: boolean;
     /**
-     * Text content to be rendered in the button
+     * 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
+     * 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)
+     * 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
+     * Additional information to be included in the `context` of analytics events that come from button.
      */
     analyticsContext?: Record<string, any>;
 };

package/dist/types/utils/variants.d.ts

@@ -42,12 +42,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
     icon?: import("../new-button/variants/types").IconProp | undefined;
-    label?: string | undefined;
+    label?: IconButtonProps['label'];
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
     icon?: import("../new-button/variants/types").IconProp | undefined;
-    label?: string | undefined;
+    label?: LinkIconButtonProps['label'];
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];
 export declare const defaultButtonVariants: DefaultButtonVariants[];

package/dist/types-ts4.5/containers/button-group.d.ts

@@ -4,11 +4,11 @@ import { jsx } from '@emotion/react';
 import { Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
-     * The appearance to apply to all buttons
+     * The appearance to apply to all buttons.
      */
     appearance?: Appearance;
     /**
-     * The buttons to render inside the Button Group
+     * The buttons to render inside the button group.
      */
     children?: React.ReactNode;
     /**
@@ -16,12 +16,12 @@ export type ButtonGroupProps = {
      */
     testId?: string;
     /**
-     * Refers to an aria-label attribute. Sets an accessible name for ButtonGroup wrapper to announce it to users of assistive technology.
+     * Refers to an `aria-label` attribute. Sets an accessible name for the button group wrapper to announce it to users of assistive technology.
      * Usage of either this, or the `titleId` attribute is strongly recommended.
      */
     label?: string;
     /**
-     * Id referenced by the ButtonGroup wrapper's aria-labelledby attribute. This id should be assigned to the group-button title element.
+     * ID referenced by the button group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group-button title element.
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;

package/dist/types-ts4.5/new-button/variants/default/types.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, interactionName, autoFocus, appearance, spacing, isDisabled, isSelected, icon, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, shape, testId, UNSAFE_size, href, "aria-label": preventedAriaLabel, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types-ts4.5/new-button/variants/icon/types.d.ts

@@ -1,9 +1,8 @@
+/// <reference types="react" />
+import { TooltipProps } from '@atlaskit/tooltip';
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
+    'aria-label'?: never;
     /**
      * The button style variation.
      */
@@ -12,11 +11,18 @@ export type CommonIconButtonProps = {
      * Places an icon within the button.
      */
     icon: IconProp;
+    /**
+     * Conditionally show a spinner over the top of a button.
+     */
+    isLoading?: boolean;
+    /**
+     * Prevent a tooltip from showing. Use sparingly.
+     */
+    isTooltipDisabled?: boolean;
     /**
      * Provide an accessible label, often used by screen readers.
      */
-    label: string;
-    'aria-label'?: never;
+    label: React.ReactNode;
     /**
      * Set the shape of the icon, defaults to square with rounded corners.
      */
@@ -25,6 +31,10 @@ export type CommonIconButtonProps = {
      * Controls the amount of padding in the button.
      */
     spacing?: IconButtonSpacing;
+    /**
+     * Props passed down to the Tooltip component.
+     */
+    tooltip?: Partial<Omit<TooltipProps, 'children'>>;
     /**
      * Set the size of the icon. `medium` is default, so it does not need to be specified.
      * This is UNSAFE as it will be removed in future in favor of a 100% bounded API.

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -1,6 +1,6 @@
 import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
 import { type CommonIconButtonProps } from './types';
-type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & CommonIconButtonProps;
+type UseIconButtonArgs<TagName extends HTMLElement> = Omit<UseButtonBaseArgs<TagName>, 'children'> & Omit<CommonIconButtonProps, 'isTooltipDisabled' | 'tooltip'>;
 type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
 /**
  * __Use icon button__

package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts

@@ -16,6 +16,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     appearance?: Appearance;
     children: React.ReactNode;
     spacing?: Spacing;
+    isLoading?: boolean;
 } & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: ReturnType<typeof xcss>;
@@ -36,5 +37,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types-ts4.5/new-button/variants/shared/xcss.d.ts

@@ -7,6 +7,7 @@ export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
+    isLoading: boolean;
     isSelected: boolean;
     isHighlighted: boolean;
     isActiveOverSelected: boolean;
@@ -29,4 +30,4 @@ export type GetXCSSArgs = {
      */
     isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isLoading, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

package/dist/types-ts4.5/new-button/variants/types.d.ts

@@ -67,6 +67,10 @@ export type AdditionalButtonVariantProps = {
      * The button style variation.
      */
     appearance?: ButtonAppearance;
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
 };
 /**
  * Combines common button props with additional HTML attributes

package/dist/types-ts4.5/old-button/types.d.ts

@@ -5,85 +5,85 @@ 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
+     * The base styling to apply to the button.
      */
     appearance?: Appearance;
     /**
-     * Set the button to autofocus on mount
+     * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
     /**
-     * Add a classname to the button
+     * Add a classname to the button.
      */
     className?: string;
     /**
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
      */
     overlay?: React.ReactNode;
     /**
-     * Provides a url for buttons being used as a link
+     * 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
+     * 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
+     * Places an icon within the button, before the button's text.
      */
     iconBefore?: React.ReactChild;
     /**
-     * Set if the button is disabled
+     * Set if the button is disabled.
      */
     isDisabled?: boolean;
     /**
-     * Change the style to indicate the button is selected
+     * Change the style to indicate the button is selected.
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur
+     * Handler to be called on blur.
      */
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     * Handler to be 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 to be called on focus
+     * Handler to be called on focus.
      */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Set the amount of padding in the button
+     * Set the amount of padding in the button.
      */
     spacing?: Spacing;
     /**
-     * Pass target down to a link within the button component, if a href is provided
+     * 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 a button
+     * Pass type down to the button.
      */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /**
-     * Option to fit button width to its parent width
+     * Option to fit button width to its parent width.
      */
     shouldFitContainer?: boolean;
     /**
-     * Text content to be rendered in the button
+     * 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
+     * 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)
+     * 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
+     * Additional information to be included in the `context` of analytics events that come from button.
      */
     analyticsContext?: Record<string, any>;
 };

package/dist/types-ts4.5/utils/variants.d.ts

@@ -42,12 +42,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
     icon?: import("../new-button/variants/types").IconProp | undefined;
-    label?: string | undefined;
+    label?: IconButtonProps['label'];
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
     icon?: import("../new-button/variants/types").IconProp | undefined;
-    label?: string | undefined;
+    label?: LinkIconButtonProps['label'];
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];
 export declare const defaultButtonVariants: DefaultButtonVariants[];

package/extract-react-types/new-button/variants/default/{common-props.tsx → common-default-button-props.tsx}

@@ -4,7 +4,7 @@ import {
   type SupportedElements,
 } from '../../../../src/new-button/variants/types';
 
-export default function CommonProps(
+export default function CommonDefaultButtonProps(
   props: CommonButtonProps<SupportedElements> & CommonDefaultButtonProps,
 ) {
   return null;

package/extract-react-types/new-button/variants/icon-button/icon-button-props.tsx

@@ -0,0 +1,5 @@
+import { AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
+
+export default function IconButtonProps(props: AdditionalButtonVariantProps) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.9.0",
+  "version": "17.11.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -91,6 +91,7 @@
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tooltip": "^18.1.3",
     "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"