Class: Button

Description: The Button component is a React component that renders a customizable button element. It allows for various configurations, including icon display, text content, styling options, and event handling. This component utilizes the react-social-login-buttons library to render the button, offering pre-defined styles and features for common social login scenarios.

Methods

Method: Button

Description: The Button component is a functional component that accepts various props to configure its appearance and behavior.

Parameters:

  • icon (string): The name of the icon to be displayed on the button. If provided, the component renders the icon using the createSvgIcon function.
    • Default: null
  • iconColor (string): The color of the icon.
    • Default: "#eceded"
  • text (string): The text to be displayed on the button.
    • Default: null
  • highlight (boolean): Indicates if the button should have a highlighted appearance. This applies specific styling for emphasis.
    • Default: false
  • primary (boolean): Indicates if the button should have a primary appearance (usually indicating a primary action). This applies specific styling for a prominent button.
    • Default: false
  • disabled (boolean): Indicates if the button should be disabled, preventing user interaction.
    • Default: false
  • onClick (function): A callback function to be triggered when the button is clicked.
    • Default: null
  • login (object): An object containing login configuration details for social logins. This is used in conjunction with the react-social-login-buttons library.
    • Default: null
  • styles (object): An object containing custom CSS styles to be applied to the button.
    • Default: null
  • innerCls (string): A CSS class name to be applied to the inner span element within the button. This allows for custom styling of the text content.
    • Default: null
  • outerCls (string): A CSS class name to be applied to the outer button element. This allows for custom styling of the button container.
    • Default: null
  • ...props (object): Additional props that are passed down to the Component from the createButton function, potentially including specific properties for different button types.

Returns:

  • React.Element: A React element representing the rendered button component.

Example:

import Button from './Button';

function MyComponent() {
  return (
    <div>
      <Button text="Click Me" onClick={() => console.log("Button clicked!")} />
      <Button icon="facebook" iconColor="#3b5998" text="Login with Facebook" login={{ provider: "facebook" }} />
      <Button text="Primary Action" primary={true} />
    </div>
  );
}

Important Considerations:

  • The Button component uses predefined style configurations for disabled, primary, and highlighted states. These can be further customized by using the styles prop.
  • The createSvgIcon function is responsible for rendering the icon based on the provided icon prop. This utilizes font awesome icons.
  • The component leverages the classNames library to combine different CSS class names dynamically, enabling flexibility in styling.

Potential Pitfalls:

  • If the login prop is provided, the Button component will render a button specific to the configured social login provider. Ensure that the login object contains valid configuration details for the chosen provider.
  • Custom styles defined through the styles prop will overwrite the default styles of the button. It is recommended to use a CSS preprocessor for managing CSS styles in a more structured way.