Gathering detailed insights and metrics for @commercetools-uikit/flat-button
Gathering detailed insights and metrics for @commercetools-uikit/flat-button
Installations
npm install @commercetools-uikit/flat-buttonDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.17.0
NPM Version
10.9.2
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/flat-button@20.2.2
Unpacked Size
61.08 kB
Size
11.27 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
FlatButton
Description
Flat buttons are minimal and a flat variation of primary and secondary buttons.
Installation
yarn add @commercetools-uikit/flat-button
npm --save install @commercetools-uikit/flat-button
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
Usage
1import FlatButton from '@commercetools-uikit/flat-button'; 2import { InformationIcon } from '@commercetools-uikit/icons'; 3 4const Example = () => ( 5 <FlatButton 6 tone="primary" 7 icon={<InformationIcon />} 8 label="A label text" 9 onClick={() => alert('Button clicked')} 10 isDisabled={false} 11 /> 12); 13 14export 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 <FlatButton> additionally accepts any props or attributes specific to the given element or component. | ||
tone | unionPossible values: 'primary' , 'secondary' , 'inverted' , 'critical' | 'primary' | Indicates the color scheme of the button. | |
type | unionPossible values: 'submit' , 'reset' , 'button' | 'button' | Used as the HTML type attribute. | |
label | string | ✅ | Should describe what the button is for. | |
onClick | FunctionSee signature. | Handler when the button is clicked. | ||
icon | ReactElement | The icon of the button. | ||
iconPosition | unionPossible values: 'left' , 'right' | 'left' | The position of the icon. | |
isDisabled | boolean | false | Determines if the button is disabled.
Note that this influences the tone and onClick will not be triggered in this state. |
Signatures
Signature onClick
1( 2 event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement> 3) => void
Where to use
Main Functions and use cases are:
- Secondary or primary action example: clear filters
- Expand/Collapse list of fields example: product attributes
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