react-sabi-button

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.

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

⚖️ License

MIT Etombi Maxwell