df-button - Get started

Custom button react component built with tailwindcss.

Install

Add Button to your project.

npm install --save df-button

* added styles.css to your application *

import 'df-button/styles.css'

Use

Button

import Button from 'df-button';

  const example = () => (
    <div>
       <Button style="primary">Button Label</Button>
    </div>
  )

Props

type Props = React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>

&

| Prop | Values | | -------- | ------- | | buttonStyle | 'primary', 'success', 'error', 'borderless' | | size | 'sm', 'md', 'lg' | | isOutline | true, false | | isPending | true, false | | disabled | true, false | | className | tailwind classes -> string format |

Button Group

import Button from 'df-button';

  const example = () => (
    <ButtonGroup>
       <Button style="primary">Button Label</Button>
       <Button style="primary">Button Label</Button>
       <Button style="primary">Button Label</Button>
    </ButtonGroup>
  )

Props

| Prop | Values | | -------- | ------- | | buttonsHasSameWidth | true, false

Override styles

You can easily override any style of component just adding a custom tailwind class inside element's className property. For that, it's required to have tailwindcss as a dependency and setup on the project.