Skip to content

Instantly share code, notes, and snippets.

@raelsei
Last active March 3, 2023 10:44
Show Gist options
  • Select an option

  • Save raelsei/1ee6c72471a198f100309740db80446f to your computer and use it in GitHub Desktop.

Select an option

Save raelsei/1ee6c72471a198f100309740db80446f to your computer and use it in GitHub Desktop.
Tailwind Button with theme example
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',
}
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
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>
export { default as Button } from './button'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment