react-sabi-button
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-sabi-button

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

131 kB

Total Files

36

Last publish

Collaborators

  • maxeto