import { Button } from '@headlessui/react'

const BasicButtonsCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button bg-primary'>Primary</Button>
        <Button className='ui-button bg-secondary'>Secondary</Button>
        <Button className='ui-button bg-success'>Success</Button>
        <Button className='ui-button bg-error'>Error</Button>
        <Button className='ui-button bg-warning'>Warning</Button>
        <Button className='ui-button bg-info'>Info</Button>
      </div>
    </div>
  )
}

export default BasicButtonsCode

import { Button } from '@headlessui/react'

const LightButtonsCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button bg-lightprimary text-primary hover:bg-primary hover:text-white'>
          Primary
        </Button>
        <Button className='ui-button bg-lightsecondary text-secondary hover:bg-secondary hover:text-white'>
          Secondary
        </Button>
        <Button className='ui-button bg-lightsuccess text-success hover:bg-success hover:text-white'>
          Success
        </Button>
        <Button className='ui-button bg-lighterror text-error hover:bg-error hover:text-white'>
          Error
        </Button>
        <Button className='ui-button bg-lightwarning text-warning hover:bg-warning hover:text-white'>
          Warning
        </Button>
        <Button className='ui-button bg-lightinfo text-info hover:bg-info hover:text-white'>
          Info
        </Button>
      </div>
    </div>
  )
}

export default LightButtonsCode

import { Button } from '@headlessui/react'

const RoundedOutlinedBtnCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button border border-primary text-primary hover:bg-primary hover:text-white'>
          Primary
        </Button>
        <Button className='ui-button border border-secondary text-secondary hover:bg-secondary hover:text-white'>
          Secondary
        </Button>
        <Button className='ui-button border border-success text-success hover:bg-success hover:text-white'>
          Success
        </Button>
        <Button className='ui-button border border-error text-error hover:bg-error hover:text-white'>
          Error
        </Button>
        <Button className='ui-button border border-warning text-warning hover:bg-warning hover:text-white'>
          Warning
        </Button>
        <Button className='ui-button border border-info text-info hover:bg-info hover:text-white'>
          Info
        </Button>
      </div>
    </div>
  )
}

export default RoundedOutlinedBtnCode

import { Button } from '@headlessui/react'

const SquareOutlineBtnCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button border border-primary text-primary hover:bg-primary hover:text-white rounded-md'>
          Primary
        </Button>
        <Button className='ui-button border border-secondary text-secondary hover:bg-secondary hover:text-white rounded-md'>
          Secondary
        </Button>
        <Button className='ui-button border border-success text-success hover:bg-success hover:text-white rounded-md'>
          Success
        </Button>
        <Button className='ui-button border border-error text-error hover:bg-error hover:text-white rounded-md'>
          Error
        </Button>
        <Button className='ui-button border border-warning text-warning hover:bg-warning hover:text-white rounded-md'>
          Warning
        </Button>
        <Button className='ui-button border border-info text-info hover:bg-info hover:text-white rounded-md'>
          Info
        </Button>
      </div>
    </div>
  )
}

export default SquareOutlineBtnCode

import { Button } from '@headlessui/react'

const DisableButtonsCode = () => {
  return (
    <div>
      <div className='flex gap-3 flex-wrap'>
        <Button className='ui-button bg-primary cursor-not-allowed' disabled>
          Primary
        </Button>
        <Button className='ui-button bg-secondary cursor-not-allowed' disabled>
          Secondary
        </Button>
        <Button className='ui-button bg-success cursor-not-allowed' disabled>
          Success
        </Button>
        <Button className='ui-button bg-error cursor-not-allowed' disabled>
          Error
        </Button>
        <Button className='ui-button bg-warning cursor-not-allowed' disabled>
          Warning
        </Button>
        <Button className='ui-button bg-info cursor-not-allowed' disabled>
          Info
        </Button>
      </div>
    </div>
  )
}

export default DisableButtonsCode

import { Button } from "@headlessui/react";

const DisableOutlineBtn = () => {
  return (
    <div>
      <div className="flex gap-3 flex-wrap">
          <Button
            className="ui-button border border-primary text-primary hover:bg-primary hover:text-white cursor-not-allowed"
            disabled
          >
            Primary
          </Button>
          <Button
            className="ui-button border border-secondary text-secondary hover:bg-secondary hover:text-white cursor-not-allowed"
            disabled
          >
            Secondary
          </Button>
          <Button
            className="ui-button border border-success text-success hover:bg-success hover:text-white cursor-not-allowed"
            disabled
          >
            Success
          </Button>
          <Button
            className="ui-button border border-error text-error hover:bg-error hover:text-white cursor-not-allowed"
            disabled
          >
            Error
          </Button>
          <Button
            className="ui-button border border-warning text-warning hover:bg-warning hover:text-white cursor-not-allowed"
            disabled
          >
            Warning
          </Button>
          <Button
            className="ui-button border border-info text-info hover:bg-info hover:text-white cursor-not-allowed"
            disabled
          >
            Info
          </Button>
        </div>
    </div>
  )
}

export default DisableOutlineBtn