Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
@synerise/ds-button
Advanced tools
import { version } from './package.json';
`Current version: ${version}`;
Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places such as dialogs, modal windows, forms, cards, and toolbars.
Inspired by Ant Design Button
This is a simple component, which means that it doesn't consist of other components.
npm i @synerise/ds-button
or
yarn add @synerise/ds-button
import Icon from '@synerise/ds-icon';
import { AngleDownS } from '@synerise/ds-icon';
<div>
<Button mode="split" type="custom-color" color="green">
Click
<Icon component={<AngleDownS />} />
</Button>
</div>
Property | Description | Type | Default |
---|---|---|---|
color | Defines color of custom-color button. | green / grey / yellow / blue / pink / mars / orange / fern / cyan / purple / violet | red |
disabled | Defines if the button is disabled. | boolean | false |
groupVariant | Defines shape of the button | left-rounded / squared / right-rounded | - |
justifyContent | Defines justify of content in button. | JustifyContentProperty (React.CSSPRroperties) | - |
loading | Sets the loading status of button. | boolean / { delay?: number } | false |
mode | Defines the mode of the button content. It affects content inside the button | single-icon / split / two-icons /label-icon / icon-label | - |
onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
type | Defines the type of the button. | primary / secondary / tertiary / tertiary-white / ghost-primary / ghost / ghost-white / custom-color / custom-color-ghost | secondary |
iconColor | Defines color of icon in button. | green / grey / yellow / blue / pink / mars / orange / fern / cyan / purple / violet | grey |
error | Defines if the button has error button styles . | boolean | false |
activated | Defines if the button has activated button styles . | boolean | false |
Property | Description | Type | Default |
---|---|---|---|
block | Defines if the button should take all available space. | boolean | false |
disabled | Defines if the button is disabled. | boolean | false |
label | Label of the button. | string / React.ReactNode | - |
onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
status | Defines the color of the button. | upload / error / default | default |
Property | Description | Type | Default |
---|---|---|---|
disabled | Defines if the button is disabled. | boolean | false |
expanded | The current state of the button. | boolean | false |
onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
size | Defines the size of the button. | S / M | M |
This is special checkbox built on Button and inheriting its appereance.
It behaves like checkbox input due to role="checkbox"
and aria-checked
attributes.
It inherits all Button
's props excluding type
, block
, color
, groupVariant
, icon
, iconColor
, leftIconSize
, mode
, rightIconSize
, size
, onChange
.
Property | Description | Type | Default |
---|---|---|---|
checked | (optional) Sets checkbox state for controlled component. | boolean | undefined |
defaultChecked | (optional) Sets checkbox state for uncontrolled component. | boolean | false |
hasError | (optional) Changes appereance for wrong validation. | boolean | undefined |
indeterminate | (optional) Forces indeterminate checkbox state. | boolean | undefined |
onChange | (optional) On change callback | (checked: boolean) => void |
This is star toggle built on Button and inheriting its appereance.
It inherits all Button
's props excluding.
Property | Description | Type | Default |
---|---|---|---|
active | (optional) Sets checkbox state for controlled component. | boolean | undefined |
FAQs
Button UI Component for the Synerise Design System
The npm package @synerise/ds-button receives a total of 1,089 weekly downloads. As such, @synerise/ds-button popularity was classified as popular.
We found that @synerise/ds-button demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.