Button (legacy)

Caution

Legacy buttons will soon be deprecated. Please use the new button, icon button, link button, or link icon button. Migrate from legacy buttons using our codemod.

View the migration guide

25.3.4

Patch Changes

  • Updated dependencies

25.3.3

Patch Changes

25.3.2

Patch Changes

25.3.1

Patch Changes

25.3.0

Minor Changes

Patch Changes

  • Updated dependencies

25.2.1

Patch Changes

25.2.0

Minor Changes

  • d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

    These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

    No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

Patch Changes

  • Updated dependencies

25.1.0

Minor Changes

  • 4e92e18998c08, (opens new window) - Apply Volt Standards (One Export Per File) to @atlaskit/button.

    No existing entry point changes behaviour and none are removed — every current import path keeps working.

    • Flattened 11 single-target entry-point shims: their package.json subpaths now point directly at the source module instead of hopping through src/entry-points/*.
    • Added 7 subpaths so the symbols behind the remaining multi-source entry points can be imported individually: ./divider, ./theme, ./split-button-container, ./split-button-with-slots, ./custom-theme-button-types, ./split-button/split-button and ./custom-theme-button/custom-theme-button.
    • Marked the re-exports in ./new, ./types, ./split-button and ./custom-theme-button as @deprecated, each pointing at the specific subpath to import from instead. These barrels continue to work; they are scheduled for removal in a later change.

25.0.4

Patch Changes

25.0.3

Patch Changes

  • Updated dependencies

25.0.2

Patch Changes

  • Updated dependencies

25.0.1

Patch Changes

25.0.0

Major Changes

  • 97d8cde4bcb72, (opens new window) - Apply Volt entry-point and multi-export standards via volt-migrate-package. This is a major change to @atlaskit/button: the package exports map has been restructured so every public subpath now resolves directly to its ./src/* implementation instead of going through an intermediate ./src/entry-points/* re-export. It also introduces new public subpaths: @atlaskit/button/custom-theme-button/custom-theme-button, @atlaskit/button/custom-theme-button-types, @atlaskit/button/divider, @atlaskit/button/split-button/split-button, @atlaskit/button/split-button-container, @atlaskit/button/split-button-with-slots, @atlaskit/button/theme.

    Why this is breaking

    Because each subpath now points straight at its implementation module, a subpath and the package root can resolve to the same module instance. Consumers that deep-import the internal entry-points/* files, or that jest.mock() a specific subpath, may observe changed resolution/behaviour and need updating.

    Migration — public imports are unchanged

    Importing the published subpaths (or the package root) continues to work as before:

    // Still valid — no change required import Button from '@atlaskit/button/button';

    If you were reaching into the internal entry-point modules, switch to the public subpath:

    -import Button from '@atlaskit/button/entry-points/button'; +import Button from '@atlaskit/button/button';

    Before / after exports map

    "exports": { ".": "./src/index.tsx", - "./button": "./src/entry-points/button.tsx", + "./button": "./src/old-button/button.tsx", - "./button-group": "./src/entry-points/button-group.tsx", + "./button-group": "./src/containers/button-group.tsx", - "./containers/button-group": "./src/entry-points/containers-button-group.tsx", + "./containers/button-group": "./src/containers/button-group.tsx", "./custom-theme-button": "./src/entry-points/custom-theme-button.tsx", + "./custom-theme-button-types": "./src/old-button/custom-theme-button/custom-theme-button-types.tsx", + "./custom-theme-button/custom-theme-button": "./src/old-button/custom-theme-button/custom-theme-button.tsx", - "./default/button": "./src/entry-points/default-button.tsx", + "./default/button": "./src/new-button/variants/default/button.tsx", + "./divider": "./src/new-button/containers/split-button/divider.tsx", - "./icon/button": "./src/entry-points/icon-button.tsx", + "./icon/button": "./src/new-button/variants/icon/button.tsx", - "./icon/link": "./src/entry-points/icon-link.tsx", + "./icon/link": "./src/new-button/variants/icon/link.tsx", - "./link": "./src/entry-points/link.tsx", + "./link": "./src/new-button/variants/default/link.tsx", - "./loading-button": "./src/entry-points/loading-button.tsx", + "./loading-button": "./src/old-button/loading-button.tsx", "./new": "./src/entry-points/new.tsx", - "./old-button/types": "./src/entry-points/old-button-types.tsx", + "./old-button/types": "./src/old-button/types.tsx", "./split-button": "./src/entry-points/split-button.tsx", + "./split-button-container": "./src/new-button/containers/split-button/split-button-container.tsx", + "./split-button-with-slots": "./src/new-button/containers/split-button/split-button-with-slots.tsx", + "./split-button/split-button": "./src/new-button/containers/split-button/split-button.tsx", - "./standard-button": "./src/entry-points/standard-button.tsx", + "./standard-button": "./src/old-button/button.tsx", + "./theme": "./src/old-button/custom-theme-button/theme.tsx", "./types": "./src/entry-points/types.tsx", - "./variants/types": "./src/entry-points/variants-types.tsx", + "./variants/types": "./src/new-button/variants/types.tsx", }

Patch Changes

  • Updated dependencies

24.3.9

Patch Changes

  • Updated dependencies

24.3.8

Patch Changes

  • Updated dependencies

24.3.7

Patch Changes

24.3.6

Patch Changes

  • 12b6bd4a9c6e1, (opens new window) - Fix: Behind the platform-dst-legacy-button-anchor-text-color feature gate, the legacy Button now applies explicit color and text-decoration values on the base, :hover, and :active states across the interactive appearances (default, primary, subtle, warning, danger, link, subtle-link). When a Button is rendered as an <a> via href, this prevents browser default or ambient anchor styles from overriding the button's text color or adding an unwanted underline on interactive states. The link and subtle-link variants keep their intentional underline on :hover / :active; button-like appearances stay underline-free. The selected appearance is unaffected \u2014 it does not declare hover/active blocks today.

24.3.5

Patch Changes

  • Updated dependencies

24.3.4

Patch Changes

  • Updated dependencies

24.3.3

Patch Changes

  • Updated dependencies

24.3.2

Patch Changes

  • a49f283ca98c6, (opens new window) - Opt IconRenderer out of React Compiler memoization ('use no memo'). IconRenderer.isIconRenderProp() misclassifies icon components missing a displayName as render-props and invokes them as plain functions instead of JSX; under React Compiler, memoization of this render could skip re-invoking an already-compiled icon component on some renders, dropping a hook call and causing a hook-count mismatch (React error #300).
  • Updated dependencies

24.3.1

Patch Changes

  • Updated dependencies

24.3.0

Minor Changes

  • 65bef1e41e5fd, (opens new window) - Add motion.button.hovered and motion.button.pressed motion tokens, and apply button background motion uplift behind the platform-dst-motion-uplift-button feature gate.

Patch Changes

  • Updated dependencies

24.2.0

Minor Changes

  • cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

    The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

  • Updated dependencies

24.1.1

Patch Changes

24.1.0

Minor Changes

  • b7327182ba010, (opens new window) - Add rovo appearance to new Button, LinkButton, and IconButton using Rovo primary background color tokens with inverse text, including documentation examples for each supported variant.

24.0.0

Major Changes

  • f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

    Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

    Types are now exclusively via the "types": "dist/types/index.d.ts" property.

    - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

  • Updated dependencies

23.11.8

Patch Changes

  • Updated dependencies

23.11.7

Patch Changes

  • Updated dependencies

23.11.6

Patch Changes

  • Updated dependencies

23.11.5

Patch Changes

23.11.4

Patch Changes

  • Updated dependencies

23.11.3

Patch Changes

  • Updated dependencies

23.11.2

Patch Changes

  • Updated dependencies

23.11.1

Patch Changes

  • Updated dependencies

23.11.0

Minor Changes

Patch Changes

  • Updated dependencies

23.10.10

Patch Changes

23.10.9

Patch Changes

23.10.8

Patch Changes

  • Updated dependencies

23.10.7

Patch Changes

23.10.6

Patch Changes

23.10.5

Patch Changes

23.10.4

Patch Changes

  • Updated dependencies

23.10.3

Patch Changes

  • Updated dependencies

23.10.2

Patch Changes

23.10.1

Patch Changes

  • Updated dependencies

23.10.0

Minor Changes

  • 4d78aaa844538, (opens new window) - Hard-codes color-mode light as the default color scheme for legacy buttons. These buttons were dependant on an old @ak/theming API which is non-functional and will be removed entirely in a following release

Patch Changes

  • Updated dependencies

23.9.9

Patch Changes

  • Updated dependencies

23.9.8

Patch Changes

23.9.7

Patch Changes

  • Updated dependencies

23.9.6

Patch Changes

  • Updated dependencies

23.9.5

Patch Changes

  • Updated dependencies

23.9.4

Patch Changes

  • Updated dependencies

23.9.3

Patch Changes

23.9.2

Patch Changes

23.9.1

Patch Changes

  • Updated dependencies

23.9.0

Minor Changes

23.8.1

Patch Changes

23.8.0

Minor Changes

Patch Changes

  • Updated dependencies

23.7.0

Minor Changes

23.6.4

Patch Changes

23.6.3

Patch Changes

  • Updated dependencies

23.6.2

Patch Changes

  • Updated dependencies

23.6.1

Patch Changes

  • Updated dependencies

23.6.0

Minor Changes

  • 1e31925550257, (opens new window) - [ux] Updates button styles to reflect our new visual design language. These changes were previously behind a feature flag and are now fully rolled out.

Patch Changes

  • Updated dependencies

23.5.4

Patch Changes

23.5.3

Patch Changes

  • Updated dependencies

23.5.2

Patch Changes

  • Updated dependencies

23.5.1

Patch Changes

  • Updated dependencies

23.5.0

Minor Changes

23.4.11

Patch Changes

23.4.10

Patch Changes

23.4.9

Patch Changes

23.4.8

Patch Changes

23.4.7

Patch Changes

  • Updated dependencies

23.4.6

Patch Changes

23.4.5

Patch Changes

  • Updated dependencies

23.4.4

Patch Changes

23.4.3

Patch Changes

  • Updated dependencies

23.4.2

Patch Changes

  • b3e26b962b5c7, (opens new window) - We are testing internal changes for Button icon sizing behind a feature flag. If this change is successful it will be available in a later release: To balance icon sizing, any chevron icons used in button icon slots will now render as size="small" by default.
  • Updated dependencies

23.4.1

Patch Changes

  • Updated dependencies

23.4.0

Minor Changes

23.3.2

Patch Changes

  • Updated dependencies

23.3.1

Patch Changes

  • Updated dependencies

23.3.0

Minor Changes

23.2.8

Patch Changes

  • Updated dependencies

23.2.7

Patch Changes

23.2.6

Patch Changes

  • Updated dependencies

23.2.5

Patch Changes

  • Updated dependencies

23.2.4

Patch Changes

  • Updated dependencies

23.2.3

Patch Changes

  • Updated dependencies

23.2.2

Patch Changes

  • Updated dependencies

23.2.1

Patch Changes

23.2.0

Minor Changes

Patch Changes

  • Updated dependencies

23.1.0

Minor Changes

Patch Changes

  • Updated dependencies

23.0.8

Patch Changes

  • Updated dependencies

23.0.7

Patch Changes

23.0.6

Patch Changes

23.0.5

Patch Changes

23.0.4

Patch Changes

23.0.3

Patch Changes

23.0.2

Patch Changes

  • Updated dependencies

23.0.1

Patch Changes

  • Updated dependencies

23.0.0

Major Changes

Patch Changes

  • Updated dependencies

22.0.5

Patch Changes

  • Updated dependencies

22.0.4

Patch Changes

  • Updated dependencies

22.0.3

Patch Changes

  • Updated dependencies

22.0.2

Patch Changes

  • Updated dependencies

22.0.1

Patch Changes

  • Updated dependencies

22.0.0

Major Changes

  • #133342, (opens new window) 569a36a196e14, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR.Please note, in order to use this version of @atlaskit/button, you will need to ensure that your bundler is configured to handle .css imports correctly.

    Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports.

    For more information on the migration,please refer to RFC-73 Migrating our components toCompiledCSS-in-JS, (opens new window)

Patch Changes

  • Updated dependencies

21.1.7

Patch Changes

  • Updated dependencies

21.1.6

Patch Changes

  • Updated dependencies

21.1.5

Patch Changes

21.1.4

Patch Changes

  • Updated dependencies

21.1.3

Patch Changes

  • Updated dependencies

21.1.2

Patch Changes

  • Updated dependencies

21.1.1

Patch Changes

21.1.0

Minor Changes

Patch Changes

  • Updated dependencies

21.0.0

Major Changes

Patch Changes

  • Updated dependencies

20.5.3

Patch Changes

  • Updated dependencies

20.5.2

Patch Changes

20.5.1

Patch Changes

  • Updated dependencies

20.5.0

Minor Changes

20.4.2

Patch Changes

20.4.1

Patch Changes

  • Updated dependencies

20.4.0

Minor Changes

Patch Changes

  • Updated dependencies

20.3.12

Patch Changes

  • Updated dependencies

20.3.11

Patch Changes

20.3.10

Patch Changes

20.3.9

Patch Changes

20.3.8

Patch Changes

  • Updated dependencies

20.3.7

Patch Changes

20.3.6

Patch Changes

20.3.5

Patch Changes

  • Updated dependencies

20.3.4

Patch Changes

20.3.3

Patch Changes

  • Updated dependencies

20.3.2

Patch Changes

20.3.1

Patch Changes

  • Updated dependencies

20.3.0

Minor Changes

20.2.6

Patch Changes

  • Updated dependencies

20.2.5

Patch Changes

20.2.4

Patch Changes

  • Updated dependencies

20.2.3

Patch Changes

20.2.2

Patch Changes

20.2.1

Patch Changes

  • Updated dependencies

20.2.0

Minor Changes

20.1.2

Patch Changes

20.1.1

Patch Changes

20.1.0

Minor Changes

20.0.0

Major Changes

Patch Changes

  • Updated dependencies

19.2.1

Patch Changes

  • Updated dependencies

19.2.0

Minor Changes

  • #127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

Patch Changes

  • Updated dependencies

19.1.2

Patch Changes

  • Updated dependencies

19.1.1

Patch Changes

  • Updated dependencies

19.1.0

Minor Changes

19.0.0

Major Changes

Patch Changes

  • Updated dependencies

18.4.1

Patch Changes

18.4.0

Minor Changes

Patch Changes

  • Updated dependencies

18.3.1

Patch Changes

  • Updated dependencies

18.3.0

Minor Changes

18.2.0

Minor Changes

Patch Changes

18.1.0

Minor Changes

18.0.2

Patch Changes

  • Updated dependencies

18.0.1

Patch Changes

  • Updated dependencies

18.0.0

Major Changes

17.23.0

Minor Changes

17.22.2

Patch Changes

17.22.1

Patch Changes

  • Updated dependencies

17.22.0

Minor Changes

17.21.0

Minor Changes

17.20.0

Minor Changes

17.19.0

Minor Changes

17.18.0

Minor Changes

  • #111486, (opens new window) f848f651ef678, (opens new window) - Accessibility improvement

    New buttons now adds ", Loading" to the accessible name of loading buttons regardless of how they are labelled. This supports labelling by text content (children), aria-label, and aria-labelledby.

    The ", Loading" label was previously part of the loading spinner <svg>, which has been relocated because this does not support aria-label or aria-labelledby. Any test locators for loading buttons may need to be updated.

    The most robust way to find loading buttons is by role and accessible name. This accounts for label precedence. For example:

    screen.findByRole("button", { name: /, Loading/, });

    To validate a loading button that is already located, use toHaveAccessibleName():

    render(<Button testId="foo" isLoading>My label</Button>); const button = screen.getByTestId("foo"); expect(button).toHaveAccessibleName(`My label , Loading`);

    For locating loading spinners, a test ID has been added that is based on the button testId. For example:

    render(<Button isLoading testId="bar">My label</Button>); const spinner = screen.getByTestId("bar--loading-spinner-wrapper"); expect(spinner).toBeInTheDocument();

17.17.3

Patch Changes

17.17.2

Patch Changes

  • Updated dependencies

17.17.1

Patch Changes

17.17.0

Minor Changes

17.16.0

Minor Changes

17.15.0

Minor Changes

17.14.3

Patch Changes

17.14.2

Patch Changes

  • Updated dependencies

17.14.1

Patch Changes

17.14.0

Minor Changes

Patch Changes

  • Updated dependencies

17.13.0

Minor Changes

17.12.2

Patch Changes

17.12.1

Patch Changes

17.12.0

Minor Changes

17.11.0

Minor Changes

17.10.0

Minor Changes

  • #88036, (opens new window) c1d62ce0679e, (opens new window) - - Fixed a bug in new loading buttons where the spinner color was incorrect in selected state.
    • Fixed a bug where the isLoading prop on new buttons was mistakenly added to unsupported link buttons.
    • New loading buttons now display a loading cursor (cursor: progress), rather than a disabled cursor (cursor: not-allowed).

Patch Changes

17.9.0

Minor Changes

17.8.0

Minor Changes

17.7.2

Patch Changes

17.7.1

Patch Changes

  • Updated dependencies

17.7.0

Minor Changes

  • #73843, (opens new window) 9a090e6e7733, (opens new window) - The new icon button incorrectly supported spacing="none". This release removes support for this, leaving "default" and "compact" as the only two options.

    The icon button docs have also been updated to better reflect the intended use of the label prop instead of aria-label. The label prop is designed to abstract the technical implementation for accessibility requirements. The new icon button does not use the aria-label attribute under the hood, rather it relys on visually hidden text instead. This is done for accessibility reasons as aria-label is not always translated whereas visually hidden text will be.

17.6.2

Patch Changes

17.6.1

Patch Changes

  • Updated dependencies

17.6.0

Minor Changes

Patch Changes

  • Updated dependencies

17.5.0

Minor Changes

17.4.0

Minor Changes

17.3.2

Patch Changes

17.3.1

Patch Changes

17.3.0

Minor Changes

  • #70040, (opens new window) d18ec4d7ce20, (opens new window) - [ux] Tidy up of the platform.design-system-team.icon-button-spacing-fix_o1zc5 Platform Feature Flag which applies a small adjustment to icon spacing for buttons using iconBefore and iconAfter props. Small visual adjustment is to be expected — keep this in mind when reviewing any VR tests breaking. The spacing around the icons will be reduced.

17.2.1

Patch Changes

  • Updated dependencies

17.2.0

Minor Changes

17.1.0

Minor Changes

17.0.0

Major Changes

Breaking changes

Removed all UNSAFE_ exports and /unsafe entrypoint.

import { UNSAFE_BUTTON } from '@atlaskit/button' ❌ import Button from '@atlaskit/button/new' ✅ import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe' ❌ import Button from '@atlaskit/button/new' ✅

See new features for new exports and entrypoint ⤵

New features

New Button goes open beta!

Check out the exports under @atlaskit/button/new and the docs for our new approach.

Button

Read the docs here.

import Button from '@atlaskit/button/new'; import { LinkButton } from '@atlaskit/button/new';
Icon button

Read the docs here.

import { IconButton } from '@atlaskit/button/new'; import { LinkIconButton } from '@atlaskit/button/new';
Split button

Read the docs here.

import { SplitButton } from '@atlaskit/button/new';

16.18.1

Patch Changes

16.18.0

Minor Changes

16.17.12

Patch Changes

16.17.11

Patch Changes

16.17.10

Patch Changes

16.17.9

Patch Changes

16.17.8

Patch Changes

16.17.7

Patch Changes

16.17.6

Patch Changes

16.17.5

Patch Changes

16.17.4

Patch Changes

16.17.3

Patch Changes

16.17.2

Patch Changes

16.17.1

Patch Changes

16.17.0

Minor Changes

16.16.1

Patch Changes

  • Updated dependencies

16.16.0

Minor Changes

16.15.0

Minor Changes

16.14.0

Minor Changes

16.13.0

Minor Changes

16.12.0

Minor Changes

Patch Changes

  • Updated dependencies

16.11.0

Minor Changes

16.10.2

Patch Changes

16.10.1

Patch Changes

16.10.0

Minor Changes

Patch Changes

  • Updated dependencies

16.9.4

Patch Changes

16.9.3

Patch Changes

16.9.2

Patch Changes

16.9.1

Patch Changes

16.9.0

Minor Changes

16.8.5

Patch Changes

16.8.4

Patch Changes

16.8.3

Patch Changes

16.8.2

Patch Changes

16.8.1

Patch Changes

16.8.0

Minor Changes

  • #34532, (opens new window) 5104149700b, (opens new window) - Button no longer unnecessarily sets tabindex as 0 for focus when using default <button> or <a> elements, as they are already focusable. This is still set when using the component prop so other elements can still be be focused. (This change is feature flagged)

16.7.6

Patch Changes

16.7.5

Patch Changes

16.7.4

Patch Changes

16.7.3

Patch Changes

16.7.2

Patch Changes

16.7.1

Patch Changes

16.7.0

Minor Changes

Patch Changes

  • Updated dependencies

16.6.1

Patch Changes

16.6.0

Minor Changes

  • #31299, (opens new window) 3367210dce8, (opens new window) - [ux] Internal change to the way focus is rendered for buttons. Focus states now apply a 2px offset to the focus ring to aid the contrast of the focus state when applied on the 'primary' and 'selected' buttons. As part of this change, and to settle on a more systemic approach to focus, button also no longer applies a different colored shadow per appearance.

16.5.7

Patch Changes

16.5.6

Patch Changes

  • Updated dependencies

16.5.5

Patch Changes

  • Updated dependencies

16.5.4

Patch Changes

16.5.3

Patch Changes

16.5.2

Patch Changes

  • Updated dependencies

16.5.1

Patch Changes

  • Updated dependencies

16.5.0

Minor Changes

Patch Changes

16.4.1

Patch Changes

  • Updated dependencies

16.4.0

Minor Changes

Patch Changes

  • Updated dependencies

16.3.10

Patch Changes

16.3.9

Patch Changes

16.3.8

Patch Changes

16.3.7

Patch Changes

16.3.6

Patch Changes

16.3.5

Patch Changes

16.3.4

Patch Changes

16.3.3

Patch Changes

16.3.2

Patch Changes

  • Updated dependencies

16.3.1

Patch Changes

  • Updated dependencies

16.3.0

Minor Changes

Patch Changes

16.2.2

Patch Changes

  • Updated dependencies

16.2.1

Patch Changes

16.2.0

Minor Changes

Patch Changes

  • Updated dependencies

16.1.6

Patch Changes

16.1.5

Patch Changes

  • Updated dependencies

16.1.4

Patch Changes

16.1.3

Patch Changes

16.1.2

Patch Changes

  • Updated dependencies

16.1.1

Patch Changes

  • Updated dependencies

16.1.0

Minor Changes

Patch Changes

16.0.0

Major Changes

  • An accidental release occurred, you can safely upgrade without making any changes as there is no difference between 15.1.8 and 16.0.0.

Patch Changes

  • Updated dependencies

15.1.8

Patch Changes

15.1.7

Patch Changes

15.1.6

Patch Changes

15.1.5

Patch Changes

15.1.4

Patch Changes

15.1.3

Patch Changes

15.1.2

Patch Changes

  • #5860, (opens new window) d7540c04cd, (opens new window) - Before 15.x it was possible for you to pass in data-testid and for that to be applied. In 15.x we changed how props are spread so that is no longer possible. Please use the public API prop testId to control data-testid

    We have:

    • Improved the types of button so that if you pass in data-testid or data-has-overlay you will get a type warning
    • Added a codemod to shift over any usages of data-testid to testId on any of our buttons (CustomThemeButton, LoadingButton or StandardButton)

    Upgrading with codemod

    You first need to have the latest button installed before you can run the codemod

    yarn upgrade @atlaskit/button@^15.1.1

    Then you can use our cli tool to run the codemod

    npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]

15.1.1

Patch Changes

15.1.0

Minor Changes

Patch Changes

  • Updated dependencies

15.0.0

Major Changes

There are now 3 button variants. We highly recommend you only install button through entry points to ensure minimum kbs. Our codemod will automatically shift you over to the entry point format

// button variants import Button from '@atlaskit/button/standard-button'; import LoadingButton from '@atlaskit/button/loading-button'; import CustomThemeButton from '@atlaskit/button/custom-theme-button'; // other entry points import ButtonGroup from '@atlaskit/button/button-group'; import { CustomThemeButtonProps } from '@atlaskit/button/types';

Spacing changes

We have made some intentional changes to button spacing:

  • There is now a smaller gap between button text and icons (8px4px). This makes a buttons text and icon feel more connected
  • Icon only buttons are now square, rather than almost being square (36px x 32px32px x 32px)

1 → 3 button variants

<Button/> as we know and love it today, has been split into three variants so that consumers only pay for the features that they use

  1. Standard button (<Button/>): The standard button that is as fast as possible which is for most usages
  • ✅ Supports the existing (discouraged) GlobalTheme dark mode pattern
  1. Loading button (<LoadingButton/>): A small wrapper around <Button/> that allows you to show a @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true
  • ✅ Supports the existing (discouraged) GlobalTheme dark mode pattern
  1. Custom theme button (<CustomThemeButton/>): This is a 1:1 of what <Button/> was previously
  • ✅ Supports the same isLoading behavior as <LoadingButton/>
  • ✅ Supports our (discouraged) experimental component theming API. This API has been identified as a performance problem
  • ✅ Supports the existing (discouraged) GlobalTheme dark mode pattern

Installing

All of the variants are all available through separate entry points to ensure minimum bundle size

import Button from '@atlaskit/button/standard-button'; import LoadingButton from '@atlaskit/button/loading-button'; import CustomThemeButton from '@atlaskit/button/custom-theme-button';

You can also import them all from the root entry point if you like! Heads up though, if your bundler does not support tree shaking then you will not get the minimum possible bundle size

Change: default export

Previously the default export of the button package was a button that supported theme

import Button from '@atlaskit/button';

Now the default export is our 'standard button' which does not support the theme prop.

Don't worry if you do use the theming API – our codemods will help move your usages to the correct version.

// before codemod import Button from '@atlaskit/button'; // after codemod import Button from '@atlaskit/button/custom-theme-button';

Improved behaviour: disabled buttons

Previously disabled buttons had fairly simple behaviour. They would call event.stopPropagation() on an inner element in the bubble phase. This would prevent onClick handlers from being called, but not other event types.

We have invested a lot of effort to make a more robust disabled button experience regardless of element type.

New disabled button approach

A disabled <button> is a native HTML concept, but disabled is not a native concept for other element types such as <a> and <span>.

The behavior of a disabled <button> is imitated as much as possible regardless of element type.

A disabled <button> will not fire any user events. We imitate this by:

  • Applying pointer-events: none to all children elements of the button element. This prevents inner elements publishing events.
  • Calling event.preventDefault() and event.stopPropagation() in the capture phase, (opens new window) for the following events: 'mousedown','mouseup''keydown''keyup''touchstart''touchend''pointerdown''pointerup', and 'click'. This prevents the event performing its default browser behavior and stops the event from proceeding to the bubble phase.
  • Not calling provided bubble and capture event listeners.

For a disabled button we also set tabIndex={-1}, and if the element has focus, we call element.blur().

New prop: overlay (Standard button only)

The overlay prop allows you to render a React.ReactNode over the top of the content inside of a button. This prop is only available for the standard button. LoadingButton and CustomThemeButton use the overlay prop for displaying a @atlaskit/spinner as needed.

Improved behavior: overlays

When an overlay is being used (such as for a @atlaskit/spinner for LoadingButton), then these changes are applied:

  • block events as if it is disabled
  • won’t lose focus automatically when the overlay is shown (unlike when it is disabled, where the focus is lost)
  • allows focus to be given and removed from the element
  • won't show :active and :hover styles (otherwise keeps the same visual and cursor experience as if it did not have an overlay)

Previously, when an overlay was used, the button simply applied pointer-events: none to the button content. This approach had a number of shortcomings.

Other changes

  • Adding font-family: inherit style rule. Recently, Chrome decided to add font-family: arial to the default <button> style rules. We fixed this issue by releasing a patch version of @atlaskit/css-reset. We have now added the fix into this package as well
  • Renaming the ButtonAppearance type to Appearance (the codemod will safely upgrade usages)
  • Documentation cleanup
  • Examples cleanup

Patch Changes

  • 83e32fa998, (opens new window) - Now uses useAnalyticsEventHandler in @atlaskit/analytics-next rather than its own version of the hook
  • e45be534ce, (opens new window) - [ux] Unwinding anchor style change in AltaskitThemeProvider. Restoring color: !important to button to deal with specificity wars
  • 6ea0de1281, (opens new window) - [ux] Not allowing anchors to have :visited styles. This restores previous behaviour
  • 642a8a7735, (opens new window) - [ux] AtlaskitThemeProvider (deprecated) applies a colour reset to anchor tags. This was impacting the colouring of @atlaskit/button. To go around specificity issues caused by AtlaskitThemeProvider in the past @atlaskit/button would apply a !important to it's color values. We have changed AtlaskitThemeProvider so that it will no longer impact the color values of @atlaskit/button
  • Updated dependencies

14.0.4

Patch Changes

14.0.3

Patch Changes

14.0.2

Patch Changes

14.0.1

Patch Changes

14.0.0

Major Changes

Patch Changes

  • Updated dependencies

13.4.2

Patch Changes

  • Updated dependencies

13.4.1

Patch Changes

13.4.0

Minor Changes

Patch Changes

13.3.12

Patch Changes

  • Updated dependencies

13.3.11

Patch Changes

13.3.10

Patch Changes

13.3.9

Patch Changes

13.3.8

Patch Changes

  • Updated dependencies e3f01787dd, (opens new window):
    • @atlaskit/webdriver-runner@0.2.0
    • @atlaskit/checkbox@10.1.9
    • @atlaskit/select@11.0.8
    • @atlaskit/spinner@12.1.5

13.3.7

Patch Changes

  • [patch]6548261c9a, (opens new window):

    Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

    • @atlaskit/docs@8.3.2
    • @atlaskit/visual-regression@0.1.9
    • @atlaskit/analytics-next@6.3.5
    • @atlaskit/checkbox@10.1.7
    • @atlaskit/icon@20.0.1
    • @atlaskit/logo@12.3.2
    • @atlaskit/select@11.0.7
    • @atlaskit/spinner@12.1.4
    • @atlaskit/theme@9.5.1
    • @atlaskit/type-helpers@4.2.3

13.3.6

Patch Changes

  • Updated dependencies c0102a3ea2, (opens new window):
    • @atlaskit/icon@20.0.0
    • @atlaskit/logo@12.3.1
    • @atlaskit/docs@8.3.1
    • @atlaskit/checkbox@10.1.6
    • @atlaskit/select@11.0.6

13.3.5

Patch Changes

13.3.4

Patch Changes

  • [patch]30acc30979, (opens new window):

    @atlaskit/select has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

13.3.3

Patch Changes

13.3.2

Patch Changes

13.3.1

13.3.0

Minor Changes

  • [minor]66e147e6a1, (opens new window):

    Adding an optional prop testId that will set the attribute value data-testid. It will help products to write better integration and end to end tests.

13.2.0

Minor Changes

13.1.7

Patch Changes

13.1.6

Patch Changes

  • [patch]097b696613, (opens new window):

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

13.1.5

Patch Changes

13.1.4

Patch Changes

  • [patch]abee1a5f4f, (opens new window):

    Bumping internal dependency (memoize-one) to latest version (5.1.0). memoize-one@5.1.0 has full typescript support so it is recommended that typescript consumers use it also.

13.1.3

Patch Changes

13.1.2

Patch Changes

  • [patch]926b43142b, (opens new window):

    Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.

    Breaking changes

    • withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEvents
    • AnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContext

    Breaking changes to TypeScript annotations

    • withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide props as a generic type.
    • withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide props as a generic type.
    • Type WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source code
    • Type CreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match source code
    • Type UIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match source code
    • Type AnalyticsEventsPayload has been renamed to AnalyticsEventPayload
    • Type ObjectType has been removed, please use Record<string, any> or [key: string]: any
    • Type UIAnalyticsEventInterface has been removed, please use UIAnalyticsEvent
    • Type AnalyticsEventInterface has been removed, please use AnalyticsEvent
    • Type CreateAndFireEventFunction removed and should now be inferred by TypeScript
    • Type AnalyticsEventUpdater removed and should now be inferred by TypeScript

13.1.1

Patch Changes

13.1.0

Minor Changes

13.0.16

Patch Changes

13.0.15

Patch Changes

13.0.14

Patch Changes

13.0.13

Patch Changes

  • [patch]d0db01b410, (opens new window):

    TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.

    Before:

    withAnalyticsEvents()(Button) as ComponentClass<Props>;

    After:

    withAnalyticsEvents<Props>()(Button);

13.0.12

Patch Changes

13.0.11

13.0.10

13.0.9

13.0.8

13.0.7

Patch Changes

13.0.6

13.0.5

  • [patch]b0ef06c685, (opens new window):
    • This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

13.0.4

13.0.3

13.0.2

13.0.1

13.0.0

  • [major]7c17b35107, (opens new window):
    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

12.0.8

  • [hotfix] fixes style error and changes spinner to a caret version.

12.0.7

  • BROKEN RELEASE. DO NOT USE.

12.0.6

12.0.5

12.0.4

12.0.3

  • Updated dependencies 9c0b4744be, (opens new window):
    • @atlaskit/docs@7.0.3
    • @atlaskit/checkbox@6.0.4
    • @atlaskit/icon@16.0.9
    • @atlaskit/logo@10.0.4
    • @atlaskit/spinner@10.0.7
    • @atlaskit/theme@8.1.7

12.0.2

12.0.1

12.0.0

  • [major]1e826b2966, (opens new window):

    Highlights

    • New theming API - Button now supports the new Atlaskit theming API, which allows for powerful custom theming of Buttons and its internal components.
    • Speed improvements - Button has been re-written from the ground up - on heavy-load benchmarks, Button is twice as fast (taking 48% of the time to load).
    • Emotion support - Button is now built using Emotion 10! This is part of a wider push for Emotion across all Atlaskit components.

    Breaking Changes:

    • The old theming API is no longer supported.
    • Styling a Button using Styled Components is no longer supported.
    • Button exports a Theme to use as context instead of using Styled Components' ThemeProvider.
    • Camel-case ARIA props have been renamed (ariaExpanded, ariaHaspopup and ariaLabel).

    See the upgrade guide, (opens new window) for more details

11.0.11

11.0.10

11.0.9

11.0.8

11.0.7

11.0.6

11.0.5

11.0.4

11.0.3

11.0.2

11.0.1

11.0.0

10.1.3

  • Updated dependencies 76299208e6, (opens new window):
    • @atlaskit/icon@16.0.4
    • @atlaskit/docs@7.0.0
    • @atlaskit/analytics-next@4.0.0
    • @atlaskit/checkbox@6.0.0
    • @atlaskit/logo@10.0.0
    • @atlaskit/spinner@10.0.0
    • @atlaskit/theme@8.0.0

10.1.2

10.1.1

  • Updated dependencies 58b84fa, (opens new window):
    • @atlaskit/analytics-next@3.1.2
    • @atlaskit/checkbox@5.0.9
    • @atlaskit/icon@15.0.2
    • @atlaskit/logo@9.2.6
    • @atlaskit/spinner@9.0.13
    • @atlaskit/theme@7.0.1
    • @atlaskit/docs@6.0.0

10.1.0

10.0.4

  • Updated dependencies d13242d, (opens new window):
    • @atlaskit/docs@5.2.3
    • @atlaskit/checkbox@5.0.8
    • @atlaskit/icon@15.0.1
    • @atlaskit/logo@9.2.5
    • @atlaskit/spinner@9.0.12
    • @atlaskit/theme@7.0.0

10.0.3

  • [patch]76a8f1c, (opens new window):
    • Convert @atlaskit/textarea to Typescript
      • Dist paths have changed, if you are importing by exact file path you will need to update your imports import '@atlaskit/button/dist/es5/components/ButtonGroup'
      • Flow types are not present any more, Typescript definitions are shipped instead

10.0.2

10.0.1

10.0.0

  • [major]6998f11, (opens new window):

    • Converted @atlaskit/button to Typescript
      • Dist paths have changed, if you are importing by exact file path you will need to update your imports
        • E.g. import '@atlaskit/button/dist/cjs/components/ButtonGroup'; would need to be updated to import '@atlaskit/button/dist/es5/components/ButtonGroup'
      • Flow types are not present any more, Typescript definitions are shipped instead
  • Updated dependencies bfac186, (opens new window):

    • @atlaskit/analytics-next-types@3.1.2
    • @atlaskit/type-helpers@2.0.0

9.0.16

9.0.15

9.0.14

9.0.13

9.0.12

9.0.11

9.0.10

9.0.9

9.0.8

9.0.6

  • [patch] Updated dependencies df22ad8, (opens new window)
    • @atlaskit/theme@6.0.0
    • @atlaskit/spinner@9.0.6
    • @atlaskit/icon@13.2.5
    • @atlaskit/checkbox@4.0.4
    • @atlaskit/docs@5.0.6

9.0.5

9.0.4

  • [patch] Updated dependencies acd86a1, (opens new window)
    • @atlaskit/icon@13.2.2
    • @atlaskit/checkbox@4.0.2
    • @atlaskit/theme@5.1.2
    • @atlaskit/spinner@9.0.4
    • @atlaskit/analytics-next@3.0.3
    • @atlaskit/docs@5.0.2

9.0.3

  • [patch] Add a SSR test for every package, add react-dom and build-utils in devDependencies 7e331b5, (opens new window)
  • [patch] Updated dependencies 7e331b5, (opens new window)
    • @atlaskit/analytics-next@3.0.2
    • @atlaskit/checkbox@4.0.1
    • @atlaskit/theme@5.1.1
    • @atlaskit/spinner@9.0.3
    • @atlaskit/icon@13.2.1

9.0.2

9.0.1

9.0.0

8.2.7

8.2.6

8.2.5

8.2.4

8.2.3

8.2.2

8.2.1

8.2.0

8.1.2

8.1.1

8.1.0

  • [patch] Updated dependencies 9d20f54, (opens new window)
    • @atlaskit/spinner@7.0.0
    • @atlaskit/icon@12.1.0
    • @atlaskit/checkbox@3.0.4
    • @atlaskit/docs@4.1.0
    • @atlaskit/theme@4.0.2
    • @atlaskit/analytics-next@2.1.7

8.0.1

8.0.0

  • [major] makes styled-components a peer dependency and upgrades version range from 1.4.6 - 3 to ^3.2.6 1e80619, (opens new window)
  • [patch] Updated dependencies 1e80619, (opens new window)
    • @atlaskit/icon@12.0.0
    • @atlaskit/analytics-next@2.1.4
    • @atlaskit/checkbox@3.0.0
    • @atlaskit/theme@4.0.0
    • @atlaskit/spinner@6.0.0
    • @atlaskit/docs@4.0.0

7.2.5

  • [patch] Updated dependencies d662caa, (opens new window)
    • @atlaskit/icon@11.3.0
    • @atlaskit/analytics-next@2.1.1
    • @atlaskit/theme@3.2.2
    • @atlaskit/docs@3.0.4

7.2.4

7.2.3

7.2.2

7.2.0

7.1.0

7.0.3

7.0.2

7.0.1

7.0.0

6.6.4

6.6.3

6.6.2

6.6.1

6.6.0

6.5.0

6.4.2

6.4.1

6.4.0

6.3.1

6.3.0

6.2.0

6.1.0

6.0.0

5.4.14 (2017-12-01)

5.4.13 (2017-11-30)

5.4.12 (2017-11-27)

5.4.11 (2017-11-27)

5.4.10 (2017-11-24)

5.4.9 (2017-11-21)

5.4.8 (2017-10-27)

5.4.7 (2017-10-27)

5.4.6 (2017-10-27)

5.4.5 (2017-10-23)

5.4.4 (2017-10-22)

5.4.3 (2017-10-16)

5.4.2 (2017-10-03)

5.4.1 (2017-09-27)

5.4.0 (2017-09-22)

5.3.0 (2017-09-18)

5.2.0 (2017-09-12)

5.1.2 (2017-09-08)

5.1.1 (2017-08-24)

5.1.0 (2017-08-23)

5.0.1 (2017-08-16)

5.0.0 (2017-08-11)

4.0.0 (2017-08-11)

3.6.0 (2017-08-09)

3.5.3 (2017-07-27)

3.5.2 (2017-07-25)

3.5.1 (2017-07-20)

3.2.0 (2017-07-17)

3.2.0 (2017-07-17)

3.1.0 (2017-07-10)

2.0.0 (2017-06-01)

1.1.4 (2017-05-25)

1.1.3 (2017-05-06)

1.1.2 (2017-04-27)

1.1.1 (2017-04-26)

1.1.0 (2017-04-20)

1.0.16 (2017-04-04)

1.0.15 (2017-03-23)

1.0.13 (2017-03-21)

1.0.11 (2017-03-08)

1.0.10 (2017-02-28)

1.0.9 (2017-02-28)

1.0.8 (2017-02-28)

1.0.7 (2017-02-28)

1.0.6 (2017-02-24)

1.0.5 (2017-02-20)

1.0.4 (2017-02-16)

1.0.3 (2017-02-09)

1.0.2 (2017-02-09)

1.0.1 (2017-02-06)

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License