![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@synerise/ds-button
Advanced tools
Readme
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,021 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.