Button

Button

Overview

The Button component is a versatile React component for rendering buttons with various styles, sizes, and functionalities. It's designed to be highly customizable, allowing you to specify colors, shades, sizes, and additional styling options. It also includes integrated sound effects for click and hover events.

Installation

To use the Button component, import it into your React project:

const { Button } = window.$_gooee.framework;

Usage

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

<Button onClick={yourClickHandler}>Click Me</Button>

Props

The Button component accepts the following props:

• children: The content to be displayed inside the button (usually text or icons).
• onClick: Function to be called when the button is clicked.
• color: Sets the button's color. Options are: primary, secondary, success, info, warning, danger, light, dark, white, black.
• shade: Sets the shade of the button. Options are: lighter, light, base, dark, darker, darkest, trans-lighter, trans-light, trans, trans-dark, trans-darker, trans-less-faded, trans-faded.
• style: Additional CSS styles to apply to the button.
• size: Adjusts the size of the button. Accepts standard size keywords.
• className: Additional CSS class names to apply to the button.
• disabled: If true, disables the button.
• isBlock: If true, the button will take the full width of its container.
• icon: If set, the button will display an icon.
• border: If true, adds a border to the button (used mainly with icons).
• circular: If true, the button will be circular.

Styling

The component uses a set of predefined CSS classes to style the button based on the props provided. It's easy to extend or override these styles by passing your own class names or style objects.

Examples

Here are some examples of how to use the Button component:

Basic Button

<Button onClick={handleClick}>Click Me</Button>

Colored Button

<Button color="primary">Primary Button</Button>

Disabled Button

<Button disabled>Disabled Button</Button>

Button with Icon

<Button icon={<YourIcon />} color="secondary">Button with Icon</Button>

Contributing

To contribute to the development of the Button component, please follow the project's contribution guidelines. All contributions are welcome, including bug fixes, feature additions, and documentation improvements.