Button D

Button with outline border and flat shadow.

Preview

Code

import styles from "./button-d.module.css"; type Props = { className?: string; style?: React.CSSProperties; children: React.ReactNode; type?: "button" | "submit" | "reset" | "link"; iconOnly?: boolean; size?: "x-small" | "small" | "medium" | "large"; width?: "auto" | "full"; height?: "auto" | "medium" | "large"; rounded?: "none" | "small" | "medium" | "large" | "full"; border?: "thin" | "medium" | "thick"; shadow?: "small" | "medium"; // Put additional variants here, then define them in the CSS variant?: "default" | "black" | "blue" | "red" ; // Optional event handler onClick?: React.MouseEventHandler; }; export default function ButtonD({ className, style, children, type = "button", iconOnly, size, width, height = "auto", rounded = "medium", border="medium", shadow = "medium", variant = "default", onClick, }: Props) { // button classes const _classNames = [ styles["button"], styles[`s-${size}`], styles[`h-${height}`], styles[`w-${width}`], styles[`r-${rounded}`], styles[`bd-${border}`], styles[`sh-${shadow}`], styles[`variant-${variant}`], iconOnly && styles[`icon-only`], className ].join(" "); // 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}> {children} </span> ); } else { return ( <button onClick={onClick} className={_classNames} style={style} type={type}> {children} </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.

  • iconOnly (boolean): Set to "true" to show only an icon element.

  • 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.

  • height ("auto" | "medium" | "large"): Specifies the height of the button.

  • rounded ("none" | "small" | "medium" | "large" | "full"): Specifies the border radius of the frame.

  • border ("thin" | "medium" | "thick"): Specifies the border size of the frame.

  • shadow ("small" | "medium"): Specifies the size of the shadow of the frame.

  • variant ("default" | "black" | "blue" | "red" 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: #c8ddf5; --shadow-color: #0077ff; }