Gathering detailed insights and metrics for @commercetools-uikit/primary-button
Gathering detailed insights and metrics for @commercetools-uikit/primary-button
Installations
npm install @commercetools-uikit/primary-buttonDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.17.0
NPM Version
10.9.2
Score
70.3
Supply Chain
82.8
Quality
95.6
Maintenance
100
Vulnerability
99.3
License
Releases
8,198
Languages
7
TypeScript
JavaScript
MDX
CSS
HTML
Prolog
Shell
TypeScript (59.12%)
JavaScript (36.8%)
MDX (2.8%)
CSS (1.02%)
HTML (0.16%)
Prolog (0.06%)
Shell (0.04%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
148 Stars
3,452 Commits
27 Forks
15 Watchers
124 Branches
351 Contributors
Updated on Jul 09, 2025
Maintainers
3
Package Meta Information
Latest Version
20.2.2
Package Id
@commercetools-uikit/primary-button@20.2.2
Unpacked Size
259.40 kB
Size
25.38 kB
File Count
12
NPM Version
10.9.2
Node Version
22.17.0
Published on
Jul 08, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
PrimaryButton
Description
Primary buttons are used for a primary action on a page. You must also pass a label for accessibility reasons.
Installation
yarn add @commercetools-uikit/primary-button
npm --save install @commercetools-uikit/primary-button
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
Usage
1import PrimaryButton from '@commercetools-uikit/primary-button'; 2import { InformationIcon } from '@commercetools-uikit/icons'; 3 4const Example = () => ( 5 <PrimaryButton 6 iconLeft={<InformationIcon />} 7 label="A label text" 8 onClick={() => alert('Button clicked')} 9 isDisabled={false} 10 /> 11); 12 13export default Example;
Properties
| Props | Type | Required | Default | Description |
|---|---|---|---|---|
as | TStringOrComponent | You may pass in a string like "a" to have the button element render an anchor tag, or
you could pass in a React Component, like a Link.
The <PrimaryButton> additionally accepts any props or attributes specific to the given element or component. | ||
type | unionPossible values: 'button' , 'reset' , 'submit' | 'button' | Used as the HTML type attribute. | |
label | string | ✅ | Should describe what the button does, for accessibility purposes (screen-reader users) | |
iconLeft | ReactElement | The left icon displayed within the button. | ||
iconRight | ReactElement | The right icon displayed within the . | ||
isToggleButton | boolean | 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 | boolean | Tells when the button should present a toggled state. It does not have any effect when isToggleButton is false. | ||
isDisabled | boolean | Tells when the button should present a disabled state. | ||
onClick | FunctionSee signature. | Handler when the button is clicked.
Required when as is undefined | ||
size | unionPossible values: TLegacySizes , TSizes | '20' | Sets the size of the button.
small, medium, and big are deprecated. Use 10, 20, instead. | |
tone | unionPossible values: 'urgent' , 'primary' , 'critical' | 'primary' | Indicates the color scheme of the button. |
Signatures
Signature onClick
1( 2 event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement> 3) => void
The component further forwards all valid HTML attributes to the underlying button component.
Examples in the Merchant Center
- Primary action: Save changes
- Affirming affects: Submit a form
- Attracting attention: Add a discount rule
No vulnerabilities found.
Reason
30 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
all changesets reviewed
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
SAST tool is run on all commits
Details
- Info: all commits (30) are checked with a SAST tool
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/close-inactive-issues.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/main.yml:14
- Info: topLevel 'contents' permission set to 'read': .github/workflows/merge-blocking-labels.yml:15
- Info: topLevel 'contents' permission set to 'read': .github/workflows/preview-release.yml:5
- Info: no jobLevel write permissions found
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'allow deletion' disabled on branch 'main'
- Info: 'force pushes' disabled on branch 'main'
- Info: 'branch protection settings apply to administrators' is required to merge on branch 'main'
- Warn: required approving review count is 1 on branch 'main'
- Warn: codeowners review is not required on branch 'main'
- Info: status check found to merge onto on branch 'main'
- Info: PRs are required in order to make changes on branch 'main'
Reason
2 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-inactive-issues.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/close-inactive-issues.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/merge-blocking-labels.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/merge-blocking-labels.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:79: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
- Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 5 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
7.3
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More