Button Component Library

Note: Copy the README.md content, paste and view it on https://markdownlivepreview.com/ for better formatting, since GitHub markdown does not support button tag.

A simple button component library with the following customizabilities

Installation

npm install @deepakr-28/button-component-library@0.5.0

Usage

import { Button } from '@deepakr-28/button-component-library'

export default function Component() {
  
  return (
    <>  
        <Button label='button name'/>
    </>
  )/
}

Available props

label

Use this prop for the button text Button <Button label="Button"/>

variant

Backgound and border color related to the button Fire Water Air Forest

<Button label="Fire" variant="fire"/>
<Button label="Water" variant="water"/>
<Button label="Air" variant="air"/>
<Button label="Forest" variant="forest"/>

Forest

// buttons without backgound-color
<Button label="Fire" variant="fire-outline"/>
<Button label="Water" variant="water-outline"/>
<Button label="Air" variant="air-outline"/>
<Button label="Forest" variant="forest-outline"/>

Size

Different sizes of the button

Large

Medium

Small

<Button size="lg" label="Large" variant="water"/>
<Button size="sm" label="Large" variant="water"/>
<Button size="med" label="Large" variant="water"/>

Border Radius

By default the border radius is false