@sakit-sa/react-button

1.1.0 • Public • Published

@sakit-sa/react-button

Simple, easy button for React

NPM JavaScript Style Guide

Button

Spinner gif

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:

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

Package Sidebar

Install

npm i @sakit-sa/react-button

Weekly Downloads

5

Version

1.1.0

License

MIT

Unpacked Size

85.1 kB

Total Files

7

Last publish

Collaborators

  • saeed.abdilar