Button Component

ButtonComponent is a customizable button component in React. It supports various styles and can include an optional icon, making it suitable for different UI needs.

Features

• Multiple style variants: primary, outlined, and secondary.
• Optional inclusion of an icon.
• Supports full width or content-fit width.
• Customizable through standard button HTML attributes.

Props

Prop	Type	Description
width	"fit" or "full"	Width style of the button (fit or full).
CTA	string	Call-to-action text displayed on the button.
variant	ButtonVariant (optional)	Style variant of the button. Defaults to primary.
Icon	any (optional)	Optional icon component, such as SVG.

Additional standard HTML button attributes can also be passed.

Component

import React, { ButtonHTMLAttributes } from "react";

type ButtonVariant = "primary" | "outlined" | "secondary";

type Props = {
  width: "fit" | "full",
  CTA: string,
  variant?: ButtonVariant,
  Icon?: any,
} & ButtonHTMLAttributes<HTMLButtonElement>;

const getButtonStyles = (variant: ButtonVariant) => {
  switch (variant) {
    case "primary":
      return "bg-btn-primary hover:bg-transparent border border-btn-border text-btn-text font-medium hover:text-btn-text-hover";
    case "outlined":
      return "bg-transparent border-gray-500 text-gray-500";
    case "secondary":
      return "bg-gray-200 border-gray-200 text-gray-600";
    default:
      return "bg-blue-500 border-blue-500 text-white";
  }
};

const ButtonComponent: React.FC<Props> = ({
  CTA,
  variant = "primary",
  Icon,
  width,
  ...rest
}) => {
  const buttonStyles = getButtonStyles(variant);

  return (
    <button
      {...rest}
      className={`${
        width === "full" ? "w-full" : "w-fit"
      } h-fit p-2 justify-center items-center flex rounded-[10px] ${buttonStyles}`}
    >
      {Icon !== null ? <Icon /> : <></>}
      {CTA !== "" ? <p className="px-2 font-semibold">{CTA}</p> : null}
    </button>
  );
};

export default ButtonComponent;

Usage

This component can be used in any scenario where a button is required, from submitting forms to triggering actions. The flexibility in styling and the option to include icons make it adaptable to various design requirements.

Styling

The component uses Tailwind CSS for styling. Customize the styles by modifying the Tailwind classes within the component.

Accessibility

Basic accessibility features such as keyboard navigability and focus management are inherently supported. Additional accessibility enhancements can be implemented based on specific use cases.

Dependencies

• React ^17.0.0 or higher
• Tailwind CSS for styling

Notes

• Ensure that the CTA (call-to-action) text is relevant to the button's function.
• If using the Icon prop, import and pass the desired icon component.

---

This documentation provides a comprehensive overview of the ButtonComponent, detailing its features, props, styling, and dependencies. Modify paths and versions as per your project's setup.