Extended ShadCN UI Button

extended-button.tsx

import { cva } from 'class-variance-authority'

import { Button as OriginalButton, buttonVariants } from './button'

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

interface ExtendedButtonProps
  extends Omit<React.ComponentProps<typeof OriginalButton>, 'variant'> {
  variant?:
    | 'default'
    | 'destructive'
    | 'outline'
    | 'secondary'
    | 'ghost'
    | 'link'
    | 'mine'
}

const extendedButtonVariants = cva(buttonVariants({}), {
  variants: {
    variant: {
      default:
        'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
      destructive:
        'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
      outline:
        'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
      secondary:
        'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
      ghost: 'hover:bg-accent hover:text-accent-foreground',
      link: 'text-primary underline-offset-4 hover:underline',
      mine: 'bg-amber-100 text-amber-800 shadow-xs hover:bg-amber-200',
    },
  },
})

export function ExtendedButton({
  variant = 'default',
  ...props
}: ExtendedButtonProps) {
  return (
    <OriginalButton
      {...props}
      className={cn(extendedButtonVariants({ variant }), props.className)}
    />
  )
}