Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@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 674 weekly downloads. As such, @synerise/ds-button popularity was classified as not 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.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.