@sakit-sa/react-button

Simple, easy button for React

Button

Live Playground

For examples of the react-button in action, go to https://abdilar.github.io/react-button.

OR

To run that demo on your own computer:

• Clone this repository
• npm install
• npm run storybook
• Visit http://localhost:6006/

Getting Started

Install

npm install @sakit-sa/react-button

Usage

import React from 'react';

import Button, {SPINNER, COLOR, TARGET, ROUNDED, SIZE, TYPE, VARIANT} from '@sakit-sa/react-button';
import '@sakit-sa/react-button/dist/index.css';

const App = () => (
  <Button>Button</Button>
);

Props

Name	Type	Default	Description
isLoading	boolean	false	Boolean value to control whether the spinner is shown.
spinnerClasses	object	{}	Apply classes to the control spinner.
spinnerName	string	uikit	Specifies the name of the spinner (name includes: uikit, puff, grid, oval, rings, ball-triangle, tail-spin, three-dots).
spinnerRatio	number	-	Specifies the size of the spinner.
activeTimer	boolean	false	Boolean value to control whether the countdown timer is shown.
time	number	0	The value of the timer base on second.
timeClasses	object	{}	Apply classes to the control countdown timer.
timeFormat	string	MM:SS	Formats a time value.
className	object	{}	Apply classes to the control button.
size	string	small	Specifies the size of the button (size includes: small, medium, large, xlarge).
id	string	react-button-[randomNumber]	The unique identifier for the component.
round	string	low	Specifies the round border of the button. (round includes: empty, low, more, fully).
type	string	button	Specifies the type of the button. (type includes: button, submit, reset).
variant	string	contained	Specifies the variant of the button. (variant includes: contained, outlined, text).
color	string	primary	Specifies the color of the button. (color includes: primary, secondary, success, danger, warning, default).
href	string	-	Sets a hyperlink and uses anchor tag instead of a button.
hrefTarget	string	_blank	Specifies the target of anchor tag. (hrefTarget includes: _blank, _self, _parent, _top).
isIcon	boolean	false	Boolean value to control whether is the icon button.
disabled	boolean	false	Boolean value to control the button is disabled.
animatable	boolean	false	Boolean value to show an animation effect when clicking on the button.
children*	node	- (Required)	Contents to be displayed within root element.
onClick	function	-	Trigger when Clicking on the button.
onCompleteTime	function	-	Trigger when countdown timer is zero.

className Token

button content

See examples for more information (go to https://abdilar.github.io/react-button/?path=/story/theme-prop--class-name)

spinnerClasses Token

wrapper spinner

See examples for more information (go to https://abdilar.github.io/react-spinner/?path=/story/theme-prop--class-name)

timeClasses Token

wrapperClass symbolClass digitClass hourClass minuteClass secondClass hourWrapperClass minuteWrapperClass secondWrapperClass

See examples for more information (go to https://abdilar.github.io/countdown-timer/?path=/story/theme--class-name)

License

MIT Licensed. © Copyright Saeed Abdilar