Tailwind Button with theme example

button.style.ts

export const inputVariant = {
  primary: 'input-primary',
  secondary: 'input-secondary',
  accent: 'input-accent',
  ghost: 'input-ghost',
}

export const inputSize = {
  xs: 'input-xs',
  sm: 'input-sm',
  md: 'input-md',
  lg: 'input-lg',
}

button.tsx

import { cn } from '@/lib/utils'

import { buttonSize, buttonVariant } from './button.style'
import { TButtonWithoutRef } from './button.type'

const Button = ({
  children,
  variant = 'default',
  size = 'md',
  outline = false,
  className,
  prefix,
  suffix,
  fluid,
  wide,
  ...props
}: TButtonWithoutRef) => {
  return (
    <button
      {...props}
      className={cn(
        'btn gap-2',
        buttonVariant[variant],
        buttonSize[size],
        {
          'btn-outline': outline,
          'btn-wide': wide,
          'btn-block': fluid,
        },
        className
      )}
    >
      <span>{prefix}</span>
      <span>{children}</span>
      <span>{suffix}</span>
    </button>
  )
}

export default Button

button.type.ts

import { ButtonHTMLAttributes, PropsWithoutRef, ReactNode, Ref } from 'react'

import { TUISize, TUIVariant } from '@/types'

type TDefaultButton = ButtonHTMLAttributes<HTMLInputElement>

type TButton = Omit<TDefaultButton, 'prefix'> & {
  children: ReactNode
  fluid?: boolean
  disabled?: boolean
  outline?: boolean
  ghost?: boolean
  variant?: TUIVariant
  size?: TUISize
  ref?: Ref<HTMLButtonElement>
  prefix?: ReactNode
  suffix?: ReactNode
  wide?: boolean
}

export type TButtonWithoutRef = PropsWithoutRef<TButton>

index.ts

export { default as Button } from './button'