variants

export type variants = <T extends Variants>(rule: T) => (props: { [K in keyof T]?: keyof T[K] }) => CSSProperties;
export const variants: variants;

import * as css from "@plumeria/core";

const getButtonStyle = css.variants({
  variant: {
    gradient: styles.gradient,
    metallic: styles.metallic,
  },
  size: {
    small: styles.small,
    medium: styles.medium,
    large: styles.large,
  },
});

interface Props {
  children: ReactNode;
  variant: 'gradient' | 'metallic';
  href: string;
}

export const ButtonLink = ({ children, variant, href }: Props) => {
  return (
    <Link href={href} styleName={getButtonStyle({ variant, size: 'medium' })}>
      {children}
    </Link>
  );
};
// call Components
<ButtonLink href={"/docs"} variant="metallic">{...}</ButtonLink>