button

import { version } from './package.json';
`Current version: ${version}`;
Storybook

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

When to use it

  • To produce things that didn’t exist before (register, submit, save, and more).
  • To perform actions (send, delete, edit, cancel, and more).
  • To confirm the displayed information.
  • Generally, to be used when actions caused by users affect back-end and/or front-end of the application.

Component anatomy

This is a simple component, which means that it doesn't consist of other components.

Installation

npm i @synerise/ds-button

or

yarn add @synerise/ds-button

Usage

import Icon from '@synerise/ds-icon';
import { AngleDownS } from '@synerise/ds-icon/dist/icons';
<div>
<Button mode="split" type="custom-color" color="green">
Click
<Icon component={<AngleDownS />} />
</Button>
</div>

Button

PropertyDescriptionTypeDefault
colorDefines color of custom-color button.green / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violetred
disabledDefines if the button is disabled.booleanfalse
groupVariantDefines shape of the buttonleft-rounded / squared / right-rounded-
justifyContentDefines justify of content in button.JustifyContentProperty (React.CSSPRroperties)-
loadingSets the loading status of button.boolean / { delay?: number }false
modeDefines the mode of the button content. It affects content inside the buttonsingle-icon / split / two-icons /label-icon / icon-label-
onClickCallback executed after clicking the button(event: React.MouseEvent) => void-
typeDefines the type of the button.primary / secondary/ tertiary/ tertiary-white / ghost-primary / ghost / ghost-white / custom-color / custom-color-ghostsecondary
iconColorDefines color of icon in button.green / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violetgrey

Button.Creator

PropertyDescriptionTypeDefault
blockDefines if the button should take all available space.booleanfalse
disabledDefines if the button is disabled.booleanfalse
labelLabel of the button.string / React.ReactNode-
onClickCallback executed after clicking the button(event: React.MouseEvent) => void-
statusDefines the color of the button.upload / error/ defaultdefault

Button.Expander

PropertyDescriptionTypeDefault
disabledDefines if the button is disabled.booleanfalse
expandedThe current state of the button.booleanfalse
onClickCallback executed after clicking the button(event: React.MouseEvent) => void-
sizeDefines the size of the button.S / MM

Button.Checkbox

This is special checkbox built on Button and inheriting its appereance. It behaves like checkbox input due to role="checkbox" and aria-checked attributes.

Props

It inherits all Button's props excluding type, block, color, groupVariant, icon, iconColor, leftIconSize, mode, rightIconSize, size, onChange.

PropertyDescriptionTypeDefault
checked(optional) Sets checkbox state for controlled component.booleanundefined
defaultChecked(optional) Sets checkbox state for uncontrolled component.booleanfalse
hasError(optional) Changes appereance for wrong validation.booleanundefined
indeterminate(optional) Forces indeterminate checkbox state.booleanundefined
onChange(optional) On change callback(checked: boolean) => void

Button.Star

This is star toggle built on Button and inheriting its appereance.

Props

It inherits all Button's props excluding.

PropertyDescriptionTypeDefault
active(optional) Sets checkbox state for controlled component.booleanundefined