17 lines
703 B
TypeScript
17 lines
703 B
TypeScript
|
import type { ComponentPropsWithRef } from 'react'
|
||
|
|
import styles from './Button.module.css'
|
||
|
|
|
||
|
|
export type ButtonVariant = 'primary' | 'outline' | 'dark'
|
||
|
|
|
||
|
|
export type ButtonProps = ComponentPropsWithRef<'button'> & {
|
||
|
|
variant?: ButtonVariant
|
||
|
|
}
|
||
|
|
|
||
|
|
// Pill button. Primary is grape with --on-accent text; outline and dark are the
|
||
|
|
// secondary treatments from the handoff. `type` defaults to "button" so a
|
||
|
|
// Button inside a form never submits by accident.
|
||
|
|
export function Button({ variant = 'primary', type = 'button', className, ...rest }: ButtonProps) {
|
||
|
|
const classes = [styles.button, styles[variant], className].filter(Boolean).join(' ')
|
||
|
|
return <button type={type} className={classes} {...rest} />
|
||
|
|
}
|