Alright, let's see if we can slim this thing down a bit. As I mentioned, only variant
and size
are particularly special.
type ButtonProps = ComponentPropsWithoutRef<'button'> & {
variant?: string;
size?: string;
};
Moving down to the component itself, even PropsWithChildren
is a bit repetitive because guess what buttons normally have? That's right, they have children. So, boom. That can go too.
const Button = ({ variant, size, className, ...props }: ButtonProps) => {
return <button {...props} className={clsx(variant, size, className)} />;
};
Check it out. I don't even have to explicity put the {children}
in there either. It's one of the props, so it's passed to the button.
We can do some additional tweaks order to make things even better.
type ButtonProps = ComponentPropsWithoutRef<'button'> & {
variant?: 'primary' | 'secondary' | 'destructive';
size?: 'small' | 'normal' | 'large';
};
const Button = ({
variant = 'secondary',
size = 'normal',
className,
...props
}: ButtonProps) => {
return <button {...props} className={clsx(variant, size, className)} />;
};
And now, I get more autocomplete!
Honestly? That's not a lot of work for such a nice benefit. I don't want to talk about how many times I've mispelled the word "success" and then not understood why my code wasn't working as expected.