Button Text C

Button text.

Preview

Code

import styles from "./button-text-c.module.css"; type Props = { className?: string; style?: React.CSSProperties; children: React.ReactNode; type?: "button" | "submit" | "reset" | "link"; size?: "x-small" | "small" | "medium" | "large"; width?: "auto" | "full"; // Put additional variants here, then define them in the CSS variant?: "default" | "black" | "blue" | "dark-blue" | "red" | "dark-red"; // Optional event handler onClick?: React.MouseEventHandler; }; export default function ButtonTextC({ className, style, children, type = "button", size, width, variant = "default", onClick, }: Props) { // button classes const _classNames = [ styles["button"], styles[`s-${size}`], styles[`w-${width}`], styles[`variant-${variant}`], className, ].join(" "); const content = ( <span className={styles["content"]}> <span className={styles["main"]}>{children}</span> <span className={styles["clone"]} aria-hidden>{children}</span> </span> ); // type of the button if (type === "link") { // Link button should be embedded inside an <a href=... > tag or <Link href=...> if you use Next.js return ( <span onClick={onClick} className={_classNames} style={style}> {content} </span> ); } else { return ( <button onClick={onClick} className={_classNames} type={type} style={style} > {content} </button> ); } }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.

  • children (ReactNode): React children of the component. Specifies the ReactNode placed inside the component.

  • type ("button" | "submit" | "reset" | "link"): Specifies the type of the button.

  • size ("x-small" | "small" | "medium" | "large"): Specifies the size of the button.

  • width ("auto" | "full"): Specifies the width of the button. "full" will make the button occupy 100% of the width of the parent and "auto" will set the width of the button to the width of the content.

  • variant ("default" | "black" | "blue" or a customized value): Specifies the color or theme variant of the component. See the "Sample CSS customization" below for an example of usage.

  • onClick (function): Fires when the button is clicked.

Sample CSS customization
.variant-blue { --fg-color: #567FEF; --hover-fg-color: rgba(86, 127, 239, 0.5); }