The Button component in goobs-frontend is a customizable button that supports various styles, icons, and configurations. It's built on top of Material-UI's Button component and offers additional features and customization options.

To use the Button component in your project, import it from the goobs-frontend package:

import { CustomButton } from 'goobs-frontend';

Here's a basic example of how to use the Button component:

import React from 'react';
import { CustomButton } from 'goobs-frontend';

const ButtonExample: React.FC = () => {
  return (
    <CustomButton
      text="Click me"
      variant="contained"
      fontcolor="white"
      backgroundcolor="black"
      onClick={() => console.log('Button clicked')}
    />
  );
};

export default ButtonExample;

The CustomButton component extends the Material-UI ButtonProps and adds several custom props:

• text: string - The text to display on the button.
• backgroundcolor: string - The background color of the button.
• fontcolor: string - The color of the button text.
• fontvariant: 'merriparagraph' | 'merrihelperfooter' - The font variant to use for the button text.
• width: string - The width of the button.
• disableButton: 'true' | 'false' - Whether the button should be disabled.
• icon: React.ReactNode - An icon to display on the button.
• iconcolor: string - The color of the icon.
• iconsize: string - The size of the icon.
• iconlocation: 'left' | 'right' | 'above' - The position of the icon relative to the text.
• fontlocation: 'left' | 'center' | 'right' - The alignment of the text within the button.

Additionally, it supports all standard Material-UI Button props such as variant, size, fullWidth, etc.

You can customize the appearance of the Button component using the provided props or the sx prop for more advanced styling. Here's an example of custom styling:

import React from 'react';
import { CustomButton } from 'goobs-frontend';
import { SendIcon } from '@mui/icons-material';

const StyledButtonExample: React.FC = () => {
  return (
    <CustomButton
      text="Send"
      variant="contained"
      fontcolor="white"
      backgroundcolor="#4CAF50"
      icon={<SendIcon />}
      iconcolor="white"
      iconsize="20px"
      iconlocation="right"
      width="200px"
      sx={{
        borderRadius: '25px',
        '&:hover': {
          backgroundColor: '#45a049',
        },
      }}
      onClick={() => console.log('Send button clicked')}
    />
  );
};

export default StyledButtonExample;

You can easily add icons to your buttons and control their position:

import React from 'react';
import { CustomButton } from 'goobs-frontend';
import { ShoppingCartIcon } from '@mui/icons-material';

const IconButtonExample: React.FC = () => {
  return (
    <>
      <CustomButton
        text="Add to Cart"
        variant="contained"
        icon={<ShoppingCartIcon />}
        iconlocation="left"
        fontcolor="white"
        backgroundcolor="#3f51b5"
      />
      <CustomButton
        text="Settings"
        variant="outlined"
        icon={<SettingsIcon />}
        iconlocation="above"
        fontcolor="#3f51b5"
        backgroundcolor="transparent"
      />
    </>
  );
};

export default IconButtonExample;

You can disable a button using the disableButton prop:

import React from 'react';
import { CustomButton } from 'goobs-frontend';

const DisabledButtonExample: React.FC = () => {
  return (
    <CustomButton
      text="Disabled Button"
      variant="contained"
      disableButton="true"
      fontcolor="white"
      backgroundcolor="grey"
    />
  );
};

export default DisabledButtonExample;

You can create a full-width button by setting the width prop to '100%':

import React from 'react';
import { CustomButton } from 'goobs-frontend';

const FullWidthButtonExample: React.FC = () => {
  return (
    <CustomButton
      text="Full Width Button"
      variant="contained"
      fontcolor="white"
      backgroundcolor="#2196F3"
      width="100%"
    />
  );
};

export default FullWidthButtonExample;

The Button component inherits accessibility features from Material-UI's Button component. It's important to provide meaningful text for screen readers, either through the text prop or an aria-label if the button only contains an icon.

1. Use clear and concise text for button labels.
2. Choose appropriate colors for good contrast and readability.
3. Use icons thoughtfully to enhance understanding without cluttering the interface.
4. Ensure that disabled buttons are visually distinct and their state is clear to users.
5. Use consistent button styles throughout your application for a cohesive user experience.
6. Consider using different button variants (contained, outlined, text) to indicate different levels of importance or types of actions.

The CustomButton component uses React.memo internally to optimize re-renders. It will only re-render if its props change. This can help improve performance in applications with many buttons or frequent state changes.

By leveraging these features and following the best practices, you can create effective and visually appealing buttons in your goobs-frontend projects that enhance user interaction and maintain consistency across your application.