React-sabi-button NPM

SABI BUTTON

Create beauitful UI buttons with ease in React

🌈 Features

Tiny size
Clean user interface
Typescipt ready
Highly customisable
Custom icon support

📝 Installation

Install sabi-button with npm

  npm i react-sabi-button

💪 Usage/Examples

import { BtnStack, SabiBtn } from 'react-sabi-button'
import { MdEmail } from 'react-icons/md'

function App() {
  return (
    <BtnStack direction='row'>
      <SabiBtn size='s' leftIcon={<MdEmail />} theme='pink'>
        This is a Button
      </SabiBtn>
    </BtnStack>
  )
}

🧩 BtnStack Props

The BtnStack collects and stacks SabiBtn components, Hence can't be called without passing SabiBtn as a child component.

Prop	Description	Type	default
border	Sets the border of the BtnStack	`string`
height	Sets the height of the BtnStack	`string`
minHeight	Sets the minHeight of the BtnStack	`string`
maxHeight	Sets the maxHeight of the BtnStack	`string`
minWidth	Sets the minWidth of the BtnStack	`string`
maxWidth	Sets the maxWidth of the BtnStack	`string`
width	Sets the width of the BtnStack	`string`	auto
display	Sets the property of display	`string`	flex
direction	Sets property of flex-direction.	`string`	row
align	Sets property of align-items	`string`	center
justifyContent	Sets property of justify-content	`string`
gridColumns	Sets property of grid-template-rows	`string`
gridRows	Sets property of grid-template-columns	`string`
whiteSpace	Sets property of white-space	`string`
wrap	Sets property of flex-wrap	`string`
overflow	Sets property of overflow	`string`
shadow	Sets property of box-shadow	`string`

🪄 SabiBtn Props

These props define the structure and look of the button component

Prop	Description	Type	default
btnType	Specifies the button type based on structure. The specs are : `solid` `outline` `glance` `glow` `faint`	`string`	glance
size	Specifies the size of the button. The specs are: `xs` `s` `m` `l` `xl`	`string`	s
theme	Specifies the color theme of the button. The specs are: `black` `white` `cool` `green` `pink` `orange` `purple` `yellow` `blue` `cyan` `blossom` `blossom-shade` `tint` `cream` `red` `default`	`string`	blue
width	Sets the width of the button	`string`
fontSize	Sets font-size of the button	`string`
height	Sets the height of the button	`string`
leftIcon	Adds icon to the left side of the button	`React.ReactNode`
rightIcon	Adds icon to the right side of the button	`React.ReactNode`
borderRadius	Sets property of border-radius of the button	`string`	1.5px
shadow	Sets property of shadow	`string`
border	Sets property of border to the button	`string`
transition	Sets property of transition to button	`string`
onFocus	Function to trigger when button is focused on.	`React.FocusEventHandler<HTMLButtonElement>`
onClick	Function to trigger when button is clicked	`React.MouseEventHandler<HTMLButtonElement>`

☛ Guide

When consuming the SabiBtn components. The following needs to be considered.

To avoid bugs, The BtnStack and SabiBtn are both required to accept props as children.
The btnType, theme and size props in SabiBtn component can't be an empty string. Either remove it or make use of it.
Every Prop should accept required inputs
"glow" btnType prop must accept "white" as theme prop