Button

1import type { ComponentPropsWithoutRef, ReactNode } from 'react'
2
3import { buttonVariants } from './variants'
4
5export type ButtonVariant = 'primary' | 'secondary'
6export type ButtonSize = 'sm' | 'md' | 'lg'
7
8export type ButtonProps = {
9  variant?: ButtonVariant
10  size?: ButtonSize
11  children?: ReactNode
12} & ComponentPropsWithoutRef<'button'>
13
14export function Button(props: ButtonProps) {
15  const {
16    variant = 'primary',
17    size = 'md',
18    children,
19    className,
20    ...rest
21  } = props
22
23  const slots = buttonVariants({ variant, size })
24
25  return (
26    <button
27      type="button"
28      className={slots.root({ class: className })}
29      {...rest}
30    >
31      {children}
32    </button>
33  )
34}
35
36export default Button
37