Mirrorful

PRIMITIVES

Colors

Spacing

COMING SOON

PACKAGE BETA 1.0.5

Component Library

Add and edit your component library


Primary Link

Use the Primary Link component for call to actions. Only use one primary link per page.

const commonClasses = "inline-flex items-center justify-center rounded px-3 py-1 font-bold focus:outline-none duration-500 sm:w-auto transition whitespace-nowrap";
const primaryClasses = classnames(
commonClasses,
"bg-gradient-primary hover:bg-gradient-primary-hover text-slate-1000 focus:ring-toxic-500 overflow-hidden"
);
                  
export function PrimaryLink({ children, className, to, ...props }: LinkProps) {
  return (
    <Link to={to} className={classnames(primaryClasses, className)} {...props}>
      {children}
    </Link>
  );
}