Skip to contentSkip to navigationSkip to topbar
Paste DSys

Button

Version 15.0.2GithubDesign assets pendingPeer review pending

A Button is a clickable element which communicates that users can trigger an action.

Change Log

15.0.2

Patch Changes

  • 6040893c0 #4311 Thanks @PixeledCode! - [Base Radio Checkbox, Button, Combobox, File Picker, File Uploader, Input, Input Box, Menu, Select, Textarea, Visual Picker] Update styles of form related components

15.0.1

Patch Changes

  • 262c1b715 #4281 Thanks @PixeledCode! - [all packages]: add use client directive to the components and icons. This will make paste library compatible with server components

15.0.0

Major Changes

  • f48211e56 #4258 Thanks @PixeledCode! - [all packages]: Upgrade to React 19 and drop support for React 16. Paste only supports the three latest versions of React. If you're using Paste in a React 17, 18, or 19 app, you should be able to upgrade with full backwards compatibility. If you experience any issues, please let us know on Github.

Patch Changes

14.1.3

Patch Changes

  • dbd869a0c #4261 Thanks @krisantrobus! - [Button, Card, InputBox, Table] updated design tokens used for background color in preparation for theme changes

14.1.2

Patch Changes

  • 3302f72e4 #3927 Thanks @krisantrobus! - [Button] Add border radius 20 to size="reset" buttons which can be overridden by passing a border radius token to variant="reset" and size="reset" buttons

14.1.1

Patch Changes

  • 1177b8f06 #3878 Thanks @cogwizzle! - Adding help text to the paste button component via JSDoc to ensure the design system guidance is accessible via the Language Server output. Minor updates to the syntax of the button component to modernize it.

14.1.0

Minor Changes

  • b8d79200b #3442 Thanks @TheSisb! - Removed all run-time prop-type checkingfrom Paste components. Paste now ships with only TypeScript types.

    ACTION NEEDED: None. This should be 100% backwards compatible.

Patch Changes

14.0.2

Patch Changes

  • 10da7d27a #3454 Thanks @SiTaggart! - [Button] improved reset variant typing to allow style props enabling the creation of custom buttons

14.0.1

Patch Changes

  • eb055b2b4 #3424 Thanks @loreina! - [Button] Update variant="destructive" Buttons to use the new colorTextDestructive token

14.0.0

Major Changes

  • 733709127 #3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles from node to browser to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences

Patch Changes

13.0.4

Patch Changes

  • 4d1f7c65e #3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.

    Existing blocked component properties include:

    • className
    • style
    • color

13.0.3

Patch Changes

  • 9e5b3b7f0 #3224 Thanks @TheSisb! - [Button] allow passing all style props to Button with variant="reset", effectively making it a Button primitive.

13.0.2

Patch Changes

  • 48e5f1e5c #3225 Thanks @nkrantz! - [Button, Help Text, In Page Navigation, Input, Input Box, Label, Select, Tab, Text Area] Update color text tokens for inverse styles

13.0.1

Patch Changes

13.0.0

Major Changes

  • 3ab2bb6f4 #3114 Thanks @SiTaggart! - ### Breaking change

    We have moved @types/react and @types/react-dom to peer dependencies of the library. This should allow for greater control and backwards compatibility with older versions of React as Paste is no longer bundling the type libraries.

    Your application likely has both of these as dependencies anyway, but it is now up to you to manage that version number.

    Action needed

    Ensure @types/react and @types/react-dom are installed as dependencies of your application.

Minor Changes

Patch Changes

12.0.1

Patch Changes

12.0.0

Major Changes

  • d97098846 #3020 Thanks @SiTaggart! - This major version included listing all the missing peer dependencies for each Paste package.

    If you are using a package from Paste in isolation from Core, when upgrading to this latest version, be sure to correctly install all the missing peer dependencies.

Patch Changes

11.1.6

Patch Changes

11.1.5

Patch Changes

11.1.4

Patch Changes

11.1.3

Patch Changes

  • edca0f7c8 #2757 Thanks @SiTaggart! - [Button, radio-button-group, codemods] Correct the ToggleButtonStyles export for use in Radio Button Group

11.1.2

Patch Changes

  • 7599162bc #2710 Thanks @gloriliale! - [Button] add box shadow to toggle button's pressed states to match regular button height

11.1.1

Patch Changes

11.1.0

Minor Changes

11.0.0

Minor Changes

Patch Changes

10.1.0

Minor Changes

10.0.1

Patch Changes

  • ae9dd50f #2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.

10.0.0

Patch Changes

9.0.0

Patch Changes

8.1.0

Minor Changes

8.0.3

Patch Changes

8.0.2

Patch Changes

  • 73c596919 #2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.

8.0.1

Patch Changes

  • c867e3f48 #2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.

  • 563a76ba3 #2249 Thanks @nkrantz! - [button]

    • Update DestructiveButton default text color to colorTextInverse
    • Update PrimaryButton default text color to colorTextInverse
    • Update DestructiveLinkButton active text color to colorTextLinkDestructiveStrongest
    • Update InverseButton box shadow to shadowBorderInverseWeakest
    • Update LinkButton active text color to colorTextLinkStrongest

8.0.0

Patch Changes

7.1.0

Minor Changes

7.0.11

Patch Changes

  • b7675915 #1985 Thanks @TheSisb! - For debugging purposes we now ship a filename.debug.js unminified version of each component or library in Paste.

7.0.10

Patch Changes

  • e1fc74a5 #1977 Thanks @nkrantz! - [Button]: Fix bug that was adding extra padding when Screen Reader Only was passed as a child.

7.0.9

Patch Changes

  • b2b0f792 #1887 Thanks @nkrantz! - [Button] Enable Component to respect element customizations set on the customization provider. Component now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.

7.0.8

Patch Changes

  • 9ed68c88 #1826 Thanks @andipants12! - [Button]: Link, Destructive link, and inverse destructive link button variants should have left aligned text.

7.0.7

Patch Changes

7.0.6

Patch Changes

7.0.5

Patch Changes

7.0.4

Patch Changes

  • 104628b3 #1505 Thanks @richbachman! - Changed default and disabled secondary button box shadow and text color styles to match Figma design files.

7.0.3

Patch Changes

  • 80529764 #1431 Thanks @richbachman! - Added a margin reset (margin: space0) to fix a bug in Safari where a 2px margin is added by the browser.

7.0.2

Patch Changes

  • 25a1f632 #1404 Thanks @SiTaggart! - update internal usage of design tokens to reflect new strong / weak nomenclature

7.0.1

Patch Changes

  • 174be6d9 #1363 Thanks @TheSisb! - Buttons that behave as links (<Button as="a" href="">) now correctly use the external link icon for external links.

7.0.0

Major Changes

  • 1bcb8b30 #1307 Thanks @TheSisb! - BREAKING CHANGES:

    Button components used as links (as="a" and href="") now automatically add an arrow icon if children is a string. This is a design breaking change that you should be aware of when upgrading.

    Button also adds additional validation to throw an error if the disabled or loading props are set to true for a Button as link. This is a functionality breaking change to existing disabled link buttons.

Patch Changes

6.0.1

Patch Changes

6.0.0

Patch Changes

5.0.1

Patch Changes

5.0.0

Patch Changes

4.0.3

Patch Changes

4.0.2

Patch Changes

4.0.1

Patch Changes

4.0.0

Patch Changes

3.0.1

Patch Changes

3.0.0

Patch Changes

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.5.1 (2021-01-25)

Note: Version bump only for package @twilio-paste/button

2.5.0 (2021-01-21)

Features

2.4.15 (2021-01-15)

Note: Version bump only for package @twilio-paste/button

2.4.14 (2021-01-14)

Note: Version bump only for package @twilio-paste/button

2.4.13 (2021-01-13)

Note: Version bump only for package @twilio-paste/button

2.4.12 (2021-01-07)

Note: Version bump only for package @twilio-paste/button

2.4.11 (2020-12-17)

Note: Version bump only for package @twilio-paste/button

2.4.10 (2020-12-17)

Note: Version bump only for package @twilio-paste/button

2.4.9 (2020-12-15)

Note: Version bump only for package @twilio-paste/button

2.4.8 (2020-12-11)

Note: Version bump only for package @twilio-paste/button

2.4.7 (2020-12-11)

Note: Version bump only for package @twilio-paste/button

2.4.6 (2020-12-09)

Note: Version bump only for package @twilio-paste/button

2.4.5 (2020-12-03)

Note: Version bump only for package @twilio-paste/button

2.4.4 (2020-12-02)

Note: Version bump only for package @twilio-paste/button

2.4.3 (2020-11-16)

Note: Version bump only for package @twilio-paste/button

2.4.2 (2020-11-11)

Note: Version bump only for package @twilio-paste/button

2.4.1 (2020-11-10)

Note: Version bump only for package @twilio-paste/button

2.4.0 (2020-11-09)

Features

  • button: add icon_small size (56ed79d)

2.3.28 (2020-11-06)

Note: Version bump only for package @twilio-paste/button

2.3.27 (2020-11-05)

Note: Version bump only for package @twilio-paste/button

2.3.26 (2020-11-02)

Note: Version bump only for package @twilio-paste/button

2.3.25 (2020-10-30)

Note: Version bump only for package @twilio-paste/button

2.3.24 (2020-10-29)

Note: Version bump only for package @twilio-paste/button

2.3.23 (2020-10-23)

Note: Version bump only for package @twilio-paste/button

2.3.22 (2020-10-22)

Note: Version bump only for package @twilio-paste/button

2.3.21 (2020-10-21)

Note: Version bump only for package @twilio-paste/button

2.3.20 (2020-10-19)

Note: Version bump only for package @twilio-paste/button

2.3.19 (2020-10-15)

Note: Version bump only for package @twilio-paste/button

2.3.18 (2020-10-13)

Note: Version bump only for package @twilio-paste/button

2.3.17 (2020-10-09)

Note: Version bump only for package @twilio-paste/button

2.3.16 (2020-10-07)

Bug Fixes

  • button: remove center justify content rule if reset (246c82b)

2.3.15 (2020-10-07)

Note: Version bump only for package @twilio-paste/button

2.3.14 (2020-10-07)

Note: Version bump only for package @twilio-paste/button

2.3.13 (2020-10-07)

Note: Version bump only for package @twilio-paste/button

2.3.12 (2020-09-28)

Bug Fixes

  • button: center content within buttons (68d96a7)

2.3.11 (2020-09-22)

Note: Version bump only for package @twilio-paste/button

2.3.10 (2020-09-21)

Note: Version bump only for package @twilio-paste/button

2.3.9 (2020-09-15)

Note: Version bump only for package @twilio-paste/button

2.3.8 (2020-09-15)

Note: Version bump only for package @twilio-paste/button

2.3.7 (2020-09-14)

Note: Version bump only for package @twilio-paste/button

2.3.6 (2020-09-10)

Note: Version bump only for package @twilio-paste/button

2.3.5 (2020-09-09)

Note: Version bump only for package @twilio-paste/button

2.3.4 (2020-09-09)

Note: Version bump only for package @twilio-paste/button

2.3.3 (2020-09-08)

Note: Version bump only for package @twilio-paste/button

2.3.2 (2020-09-08)

Note: Version bump only for package @twilio-paste/button

2.3.1 (2020-09-03)

Note: Version bump only for package @twilio-paste/button

2.3.0 (2020-09-02)

Features

  • button: add inverse_link button variant (f3250a1)

2.2.0 (2020-08-31)

Features

  • button: add desctructive_secondary variant (52dbfec)

2.1.6 (2020-08-31)

Note: Version bump only for package @twilio-paste/button

2.1.5 (2020-08-27)

Bug Fixes

2.1.4 (2020-08-24)

Note: Version bump only for package @twilio-paste/button

2.1.3 (2020-08-19)

Note: Version bump only for package @twilio-paste/button

2.1.2 (2020-08-12)

Bug Fixes

  • button: reset variant should inherit type styles (efdd3d6)

2.1.1 (2020-08-12)

Note: Version bump only for package @twilio-paste/button

2.1.0 (2020-08-12)

Features

  • button: add inverse variant (4a6f241)

2.0.2 (2020-08-12)

Note: Version bump only for package @twilio-paste/button

2.0.1 (2020-08-06)

Note: Version bump only for package @twilio-paste/button

2.0.0 (2020-08-05)

Bug Fixes

  • icons: use display=block by default and rename 'iconColor' prop to 'color' (#637) (82beef4)

BREAKING CHANGES

  • icons: This change renames a key prop and changes the display mode from inline-flex to block

  • fix: use new icon prop (iconColor -> color)

  • test: update snapshots

  • chore(icons): update readme to mention correct display value

Co-authored-by: Rich Bachman rb@richbachman.com

  • chore(website): update icon doc prop table

Co-authored-by: Rich Bachman rb@richbachman.com

Co-authored-by: Rich Bachman rb@richbachman.com

1.2.28 (2020-08-04)

Note: Version bump only for package @twilio-paste/button

1.2.27 (2020-08-04)

Note: Version bump only for package @twilio-paste/button

1.2.26 (2020-07-31)

Note: Version bump only for package @twilio-paste/button

1.2.25 (2020-07-30)

Note: Version bump only for package @twilio-paste/button

1.2.24 (2020-07-29)

Note: Version bump only for package @twilio-paste/button

1.2.23 (2020-07-28)

Note: Version bump only for package @twilio-paste/button

1.2.22 (2020-07-22)

Note: Version bump only for package @twilio-paste/button

1.2.21 (2020-07-20)

Note: Version bump only for package @twilio-paste/button

1.2.20 (2020-07-15)

Note: Version bump only for package @twilio-paste/button

1.2.19 (2020-07-14)

Note: Version bump only for package @twilio-paste/button

1.2.18 (2020-07-14)

Note: Version bump only for package @twilio-paste/button

1.2.17 (2020-07-02)

Note: Version bump only for package @twilio-paste/button

1.2.16 (2020-07-02)

Note: Version bump only for package @twilio-paste/button

1.2.15 (2020-07-01)

Note: Version bump only for package @twilio-paste/button

1.2.14 (2020-06-29)

Note: Version bump only for package @twilio-paste/button

1.2.13 (2020-06-25)

Note: Version bump only for package @twilio-paste/button

1.2.12 (2020-06-25)

Note: Version bump only for package @twilio-paste/button

1.2.11 (2020-06-23)

Note: Version bump only for package @twilio-paste/button

1.2.10 (2020-06-22)

Note: Version bump only for package @twilio-paste/button

1.2.9 (2020-06-18)

Note: Version bump only for package @twilio-paste/button

1.2.8 (2020-06-16)

Note: Version bump only for package @twilio-paste/button

1.2.7 (2020-06-12)

Note: Version bump only for package @twilio-paste/button

1.2.6 (2020-06-10)

Note: Version bump only for package @twilio-paste/button

1.2.5 (2020-06-05)

Note: Version bump only for package @twilio-paste/button

1.2.4 (2020-06-01)

Note: Version bump only for package @twilio-paste/button

1.2.3 (2020-06-01)

Note: Version bump only for package @twilio-paste/button

1.2.2 (2020-05-28)

Note: Version bump only for package @twilio-paste/button

1.2.1 (2020-05-27)

Note: Version bump only for package @twilio-paste/button

1.2.0 (2020-05-20)

Features

  • button: expose button ref (469694a)

1.1.45 (2020-05-07)

Note: Version bump only for package @twilio-paste/button

1.1.44 (2020-05-07)

Note: Version bump only for package @twilio-paste/button

1.1.43 (2020-05-04)

Note: Version bump only for package @twilio-paste/button

1.1.42 (2020-05-01)

Note: Version bump only for package @twilio-paste/button

1.1.41 (2020-04-29)

Bug Fixes

  • button: allow html button attributes, rework prop destructuring (6b8be87)

1.1.40 (2020-04-25)

Note: Version bump only for package @twilio-paste/button

1.1.39 (2020-04-22)

Note: Version bump only for package @twilio-paste/button

1.1.38 (2020-04-20)

Note: Version bump only for package @twilio-paste/button

1.1.37 (2020-04-17)

Note: Version bump only for package @twilio-paste/button

1.1.36 (2020-04-15)

Note: Version bump only for package @twilio-paste/button

1.1.35 (2020-04-08)

Bug Fixes

  • button: package dependencies updated to be correct (9c82da5)

1.1.34 (2020-04-07)

Note: Version bump only for package @twilio-paste/button

1.1.33 (2020-04-07)

Note: Version bump only for package @twilio-paste/button

1.1.32 (2020-04-02)

Note: Version bump only for package @twilio-paste/button

1.1.31 (2020-03-28)

Note: Version bump only for package @twilio-paste/button

1.1.30 (2020-03-24)

Bug Fixes

  • button: switch from theme-tokens to theme package dep (d9441c2)

1.1.29 (2020-03-20)

Note: Version bump only for package @twilio-paste/button

1.1.28 (2020-03-17)

Note: Version bump only for package @twilio-paste/button

1.1.27 (2020-03-17)

Note: Version bump only for package @twilio-paste/button

1.1.26 (2020-03-11)

Note: Version bump only for package @twilio-paste/button

1.1.25 (2020-03-06)

Bug Fixes

  • add missing transitive peerDep on '@styled-system/css' (fdbb813)

1.1.24 (2020-03-04)

Bug Fixes

  • button: change borders to box-shadow (689061d)

1.1.23 (2020-03-02)

Note: Version bump only for package @twilio-paste/button

1.1.22 (2020-03-02)

Note: Version bump only for package @twilio-paste/button

1.1.21 (2020-02-28)

Note: Version bump only for package @twilio-paste/button

1.1.20 (2020-02-26)

Bug Fixes

  • package dependencies and deprecation warnings (#334) (0e88338)

1.1.19 (2020-02-21)

Note: Version bump only for package @twilio-paste/button

1.1.18 (2020-02-20)

Note: Version bump only for package @twilio-paste/button

1.1.17 (2020-02-19)

Note: Version bump only for package @twilio-paste/button

1.1.16 (2020-02-18)

Note: Version bump only for package @twilio-paste/button

1.1.15 (2020-02-14)

Bug Fixes

  • button: add missing peer deps (38416d8)

1.1.14 (2020-02-13)

Note: Version bump only for package @twilio-paste/button

1.1.13 (2020-02-11)

Note: Version bump only for package @twilio-paste/button

1.1.12 (2020-02-11)

Note: Version bump only for package @twilio-paste/button

1.1.11 (2020-02-11)

Note: Version bump only for package @twilio-paste/button

1.1.10 (2020-02-07)

Note: Version bump only for package @twilio-paste/button

1.1.9 (2020-02-03)

Note: Version bump only for package @twilio-paste/button

1.1.8 (2020-01-27)

Note: Version bump only for package @twilio-paste/button

1.1.7 (2020-01-25)

Note: Version bump only for package @twilio-paste/button

1.1.6 (2020-01-24)

Bug Fixes

1.1.5 (2020-01-17)

Note: Version bump only for package @twilio-paste/button

1.1.4 (2019-12-20)

Note: Version bump only for package @twilio-paste/button

1.1.3 (2019-12-19)

Note: Version bump only for package @twilio-paste/button

1.1.2 (2019-12-05)

Note: Version bump only for package @twilio-paste/button

1.1.1 (2019-11-27)

Bug Fixes

  • button: defensively set hover/focus/active styles from legacy globals (#205) (2a9ce57)

1.1.0 (2019-11-20)

Bug Fixes

  • remap console semibold to medium font weight (#195) (c01f6b3)

Features

  • icons: make decorative required + icon docs (#165) (15ccbc2)

1.0.2 (2019-11-18)

Bug Fixes

  • correct button heights add new default icon size (#186) (2e54478)
  • design-tokens: update some blues, reds, and focus shadow (#185) (98d70cc)
  • update destructive button styles to be filled (#189) (c29b7ca)

1.0.1 (2019-11-12)

Note: Version bump only for package @twilio-paste/button

1.0.0 (2019-11-11)

Bug Fixes

  • button: add font-weight semibold to small buttons (#166) (582245b)
  • website: update button docs with loading and icon states (#167) (7380889)

Features

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • typography: heading component (#149) (4e033e6)
  • enable theme switching on the docsite (#124) (df797e5)

BREAKING CHANGES

  • icons: removed all the inherited icons since we're moving to a new system

  • chore(icons): update icon list for storybook

  • fix(spinner): use new icon

  • fix(storybook): use new icon for story

  • fix(story): button icons should be 24px

  • fix: adjust icon size tokens

  • feat: add iconSizes as separate key in theme-tokens

  • feat(icons): icons package to use tokens and update icons

  • fix(spinner): update to use tokens and new icons

  • fix(button): use correct spinner size

  • fix(icons): major icons package fixes

  • huge overhaul to build process
  • now uses rollup
  • builds into cjs and esm directories
  • made the package publishable to npm
  • moved svg folder out of src, now src only holds react stuff
  • updated scripts to use new paths and cleaned up the code
  • programmatically generates rollup config from the icon-list command

  • chore: add new icons dist folders to gitignore

  • fix: spinner and button icon usage

  • feat(icons): add rollup icon list cache file

  • fix(core-bundle): sort packages for consistent builds

  • chore: use esm instead of es in rollup for correctness

  • chore: yarn.lock

  • fix(spinner): lint error

  • chore(icons): move rollup icon list

  • chore(spinner): use types package in story

  • fix(spinner): swap out destructured props for explicit props

0.3.1 (2019-10-31)

Note: Version bump only for package @twilio-paste/button

0.3.0 (2019-10-29)

Bug Fixes

  • button: border-color should transition with background-color (#130) (fda61ba)
  • remove the underline from button states (#147) (70d4c15), closes #54

Features

0.2.1 (2019-09-16)

Bug Fixes

  • button: adding some polish (#67) (2644657)
  • button: adjust primary, secondary, desctructive styles (#72) (670faef)

0.2.0 (2019-08-15)

Bug Fixes

Features