# @commercetools-uikit/secondary-button > Secondary buttons are used in combination with a PrimaryButton and represent the secondary action. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/secondary-button pnpm add @commercetools-uikit/secondary-button yarn add @commercetools-uikit/secondary-button bun add @commercetools-uikit/secondary-button ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2019-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 289.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 154 | | Maintainers | emmenko, commercetools-admin, tdeekens | | Keywords | javascript, typescript, design-system, react, uikit | ## Links - npm: https://www.npmjs.com/package/@commercetools-uikit/secondary-button - Repository: https://github.com/commercetools/ui-kit - Homepage: https://uikit.commercetools.com - Issues: https://github.com/commercetools/ui-kit/issues - npm.io page: https://npm.io/package/@commercetools-uikit/secondary-button ## Dependencies (10) - [lodash](https://npm.io/package/lodash.md) 4.18.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13 - [@commercetools-uikit/text](https://npm.io/package/@commercetools-uikit/text.md) ^20.6.7 - [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 - [@commercetools-uikit/spacings-inline](https://npm.io/package/@commercetools-uikit/spacings-inline.md) ^20.6.7 - [@commercetools-uikit/accessible-button](https://npm.io/package/@commercetools-uikit/accessible-button.md) ^20.6.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20260831181816 (canary) — 2026-08-31 - 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18 - 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13 - 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19 - 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28 - 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27 - 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09 - 0.0.0-main-20250115172531 (main) — 2025-01-15 - 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13 - 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12 - 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11 - 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10 - 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04 - 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24 - … 1077 more at https://npm.io/package/@commercetools-uikit/secondary-button/versions ## README # Buttons: Secondary Button ## Description Secondary buttons are used in combination with a `PrimaryButton` given a converse secondary action on a page. You must also pass a label for accessibility reasons. ## Usage ```js import SecondaryButton from '@commercetools-uikit/secondary-button'; } label="Alerts a message" onClick={() => alert('Button clicked')} />; ``` ## Properties | Props | Type | Required | Values | Default | Description | | ------------------ | --------------------- | :------: | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | `string` | ✅ | - | - | Should describe what the button does, for accessibility purposes (screen-reader users) | | `iconLeft` | `node` | - | - | - | The left icon displayed within the button | | `iconRight` | `node` | - | - | - | The right icon displayed within the button | | `isToggleButton` | `bool` | ✅ | - | `false` | If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled | | `isToggled` | `bool` | - | - | - | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is false | | `theme` | `string` | - | `default`, `info` | `default` | The component may have a theme only if `isToggleButton` is true. This property has been **deprecated** in favor of `tone`. | | `tone` | `string` | - | `secondary`, `info` | `secondary` | Indicates the color scheme of the button | | `size` | `string` | - | `'medium' , 'big'` | `'big'` | Indicates the size of the button. | | `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state | | `buttonAttributes` | `object` | - | - | - | Allows setting custom attributes on the underlying button html element | | `type` | `string` | - | `submit`, `reset`, `button` | `button` | Used as the HTML `type` attribute. | | `onClick` | `func` | | - | - | What the button will trigger when clicked | | `to` | `string` or `object` | - | - | - | Where the button should redirect when clicked | | `as` | `string` or `element` | - | - | - | You may pass in a string like "a" to have the button render as an anchor tag instead. Or you could pass in a React Component, like a `Link`. | The component further forwards all valid HTML attributes to the underlying `button` component. Main Functions and use cases are: - Secondary action _example: Discard changes_ - Restoring state _example: Canceling a form_ --- _Source: https://npm.io/package/@commercetools-uikit/secondary-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._