import React from 'react'
import { Button } from '@/components/ui/button'
const BasicButtonCode = () => {
  return (
    <>
      <div className='flex flex-wrap items-center gap-3 mt-4'>
        <Button>Primary</Button>
        <Button variant='secondary'>Secondary</Button>
        <Button variant='success'>Success</Button>
        <Button variant='warning'>Warning</Button>
        <Button variant='error'>Error</Button>
        <Button variant='info'>Info</Button>
      </div>
    </>
  )
}

export default BasicButtonCode

import { Button } from '@/components/ui/button'

const LightButtonCode = () => {
  return (
    <>
      <div className='flex flex-wrap items-center gap-3 mt-4'>
        <Button variant='lightprimary'>Primary</Button>
        <Button variant='lightsecondary'>Secondary</Button>
        <Button variant='lightsuccess'>Success</Button>
        <Button variant='lightwarning'>Warning</Button>
        <Button variant='lighterror'>Error</Button>
        <Button variant='lightinfo'>Info</Button>
      </div>
    </>
  )
}

export default LightButtonCode

import { Button } from '@/components/ui/button'

const RoundedButtonCode = () => {
  return (
    <div className='flex flex-wrap items-center gap-3'>
      <Button shape={'pill'}>Primary</Button>
      <Button variant='secondary' shape={'pill'}>
        Secondary
      </Button>
      <Button variant='success' shape={'pill'}>
        Success
      </Button>
      <Button variant='warning' shape={'pill'}>
        Warning
      </Button>
      <Button variant='error' shape={'pill'}>
        Error
      </Button>
      <Button variant='info' shape={'pill'}>
        Info
      </Button>
    </div>
  )
}

export default RoundedButtonCode

import React from 'react'
import { Button } from '@/components/ui/button'

const GhostButtonCode = () => {
  return (
    <>
      <div className='flex flex-wrap items-center gap-3 mt-4'>
        <Button variant='ghostprimary'>Primary</Button>
        <Button variant='ghostsecondary'>Secondary</Button>
        <Button variant='ghostsuccess'>Success</Button>
        <Button variant='ghostwarning'>Warning</Button>
        <Button variant='ghosterror'>Error</Button>
        <Button variant='ghostinfo'>Info</Button>
      </div>
    </>
  )
}

export default GhostButtonCode

import React from 'react'
import { Button } from '@/components/ui/button'

const OutlineButtonCode = () => {
  return (
    <>
      <div className='flex flex-wrap items-center gap-3 mt-4'>
        <Button variant='outline'>Primary</Button>
        <Button variant='outlinesecondary'>Secondary</Button>
        <Button variant='outlinesuccess'>Success</Button>
        <Button variant='outlinewarning'>Warning</Button>
        <Button variant='outlineerror'>Error</Button>
        <Button variant='outlineinfo'>Info</Button>
      </div>
    </>
  )
}

export default OutlineButtonCode

import { Button } from '@/components/ui/button'

const RoundedOutlineButtonCode = () => {
  return (
    <div className='flex flex-wrap items-center gap-3'>
      <Button variant='outline' shape={'pill'}>Primary</Button>
      <Button variant='outlinesecondary' shape={'pill'}>
        Secondary
      </Button>
      <Button variant='outlinesuccess' shape={'pill'}>
        Success
      </Button>
      <Button variant='outlinewarning' shape={'pill'}>
        Warning
      </Button>
      <Button variant='outlineerror' shape={'pill'}>
        Error
      </Button>
      <Button variant='outlineinfo' shape={'pill'}>
        Info
      </Button>
    </div>
  )
}

export default RoundedOutlineButtonCode

'use client'

import { Button } from '@/components/ui/button'
import { Icon } from '@iconify/react/dist/iconify.js'

const ButtonWithIconCode = () => {
  return (
    <>
      <div className='flex flex-wrap items-center gap-3 mt-4'>
        <Button>
          {' '}
          <Icon icon='tabler:mail' className='text-lg' /> Login with email
        </Button>
        <Button variant='secondary'>
          <Icon icon='tabler:garden-cart' className='text-lg' /> Shop now
        </Button>
        <Button variant='success'>
          <Icon icon='tabler:user-circle' className='text-lg' /> Signup now
        </Button>
        <Button variant='warning'>
          <Icon icon='tabler:calendar-event' className='text-lg' /> Live event
        </Button>
        <Button variant='info'>
          <Icon icon='tabler:align-box-left-bottom' className='text-lg' />
          Create project
        </Button>
        <Button variant='error'>
          <Icon icon='tabler:user-shield' className='text-lg' /> Login now
        </Button>
      </div>
    </>
  )
}

export default ButtonWithIconCode

import React from 'react'
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-react'

const LoadingButtonCode = () => {
  return (
    <>
    <div className="flex flex-wrap items-center gap-3 mt-4">
               <Button disabled ><Loader2 className="animate-spin" /> Please wait</Button>
               <Button variant="secondary" disabled ><Loader2 className="animate-spin" /> Please wait</Button>
               <Button variant="success" disabled ><Loader2 className="animate-spin" /> Please wait</Button>
               <Button variant="warning" disabled ><Loader2 className="animate-spin" /> Please wait</Button>
               <Button variant="error" disabled ><Loader2 className="animate-spin" /> Please wait</Button>
               <Button variant="info" disabled ><Loader2 className="animate-spin" /> Please wait</Button>
            </div>
    </>
  )
}

export default LoadingButtonCode