Buttons

Download

npx github-download-directory carllosnc/cn-react-thekit src/components/Button

Import

import { Button } from '@/components'

Anatomy

<Button /> extends React.ButtonHTMLAttributes<HTMLButtonElement>, then you can use all props and event of <button>

Dependencies

ReactIcon

npm install react-icons

Usage

import { Button } from '@/components'
import { MdStar, MdHeadset } from 'react-icons/md'

function App() {
  return (
    <div>
      <div className="flex gap-4">
        <Button leftIcon={<MdStar />}>Button</Button>
        <Button rightIcon={<MdHeadset />}>Button</Button>
        <Button leftIcon={<MdStar />} rightIcon={<MdHeadset />}>
          Button
        </Button>
      </div>

      <div className="flex gap-4">
        <Button isLoading="Carregando...">Button</Button>
        <Button isLoading="Loading...">Button</Button>
      </div>
    </div>
  )
}

Props

name	type	default	description
children	string	undefined	button label
isloading	string	false	loading mode
leftIcon	ReactIcon	undefined	icon at left
rightIcon	ReactIcon	undefined	icon at right