@sakit-sa/react-button NPM

@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.

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

sakit-sa button react spinner countdown-timer react-button javascritp component front-end

@sakit-sa/countdown-timer @sakit-sa/react-spinner prop-types

@infinitebrahmanuniverse/nolb-_sak @everything-registry/sub-chunk-802 @zalastax/nolb-_sak

1.1.0

4 years ago

1.0.0

5 years ago