1. Installation

You can install this package via npm:

npm i @ibrahimstudio/button
# or
yarn add @ibrahimstudio/button

2. Usage

Import the Button component in your React application and use it as follows :

import { Button } from "@ibrahimstudio/button";

const Homepage = () => {
  return (
    <div id="homepage">
      <nav>
        <Button buttonText="Click Me!" />
      </nav>
    </div>
  );
};

3. Usage of type attribute

3.1. With button type (default)

Add "button" value to type attribute, then implement onClick event handler

<Button buttonText="Login Now" type="button" onClick={() => console.log("logged in.")} />
// or (default) :
<Button buttonText="Login Now" onClick={() => console.log("logged in.")} />

3.2. With submit type

Add "submit" value to type attribute when the component usage is for <form> element

<Button buttonText="Login Now" type="submit" />

3.3. With route type

Add "route" value to type attribute, then add target route in to attribute

<Button buttonText="About Us" type="route" to="/about-page" />

3.4. With link type

Add "link" value to type attribute, then add target URL in href attribute

// open link in new tab
<Button buttonText="View Content" type="link" href="https://example.com" />
// open link in current tab
<Button buttonText="View Content" type="link" href="https://example.com" isNewtab={false} />

4. Customizing styles of Button

4.1. Usage of size attribute

You can apply and use this Button as primary or secondary button. Fill the size attribute with sm value to use it as secondary button

// primary button (default)
<Button buttonText="Register" />
// secondary button
<Button buttonText="Register" size="sm" />

4.2. Customize Button's color

You can add a color value to the color and bgColor attribute to custom Button's color like this :

<Button buttonText="Register" color="white" bgColor="blue" />

Or you can add style globally with configure this CSS variable in your global.css or index.css :

:root {
  --color-button: blue; /* button color */
  --color-button-text: white; /* text color inside button */
  --font-button: Inter; /* font family */
}

4.3. Customize Button's variant

You can customize the Button's variant using variant attribute

// add value to "variant" attribute (default: "fill")
<Button buttonText="Register" variant="line" />

4.4. Customize Button's radius

You can customize the Button's radius using radius attribute

// add value to "radius" attribute (default: "md")
<Button buttonText="Register" radius="md" />

4.5. Customize Button's content

You can customize the Button's content by choosing between "reg" (regular, has startContent/endContent or both and buttonText), or "icon" (icon only) in subVariant attribute then implement iconContent attribute

// with "reg" option (default)
<Button buttonText="Log Out" endContent={<ExitIcon width="auto" height="15px" />} />
// with "icon" option
<Button subVariant="icon" iconContent={<ExitIcon width="auto" height="15px" />} />

5. Boundary Aware Tooltip

You can add tooltip to this components (especially for "icon" subVariant) by adding the isTooltip and tooltipText value

// with "reg" option (default)
<Button buttonText="Register Now" isTooltip={true} tooltipText="Create Account" />
// with "icon" option
<Button subVariant="icon" isTooltip={true} tooltipText="View Cart" />

6. API

6.1. Button Props

| Attribute | Type | Description | Condition | Default | | ---------------- | -------------------------------------- | ------------------------------------------------------------------------ | ------------------- | -------------------------- | | id | string (required) | Specifies the id of the button. | - | ibrahimstudio-default-id | | size | sm / reg | Specifies the size of the button. | - | reg | | type | button / submit / route / link | Specifies the type of the button. | - | button | | variant | fill / hollow / line / dashed | Specifies the visual style variant of the button. | - | fill | | subVariant | reg / icon | Specifies the sub-variant of the button, whether regular or icon. | - | reg | | radius | none / sm / md / lg / full | Specifies the border radius of the button. | - | md | | color | string | Specifies the text color of the button. | - | var(--color-button-text) | | bgColor | string | Specifies the background color of the button. | - | var(--color-button) | | buttonText | string (required) | The text content of the button. | subVariant="reg" | Click Me! | | tooltipText | string (required) | The text content of the tooltip. | isTooltip="true" | Tooltip! | | isLoading | boolean | Indicates whether the button is in a loading state. | - | false | | isDisabled | boolean | Indicates whether the button is in a disabled state. | - | false | | isFullwidth | boolean | Indicates whether the button is in a full-width state. | isTooltip="false" | false | | isTooltip | boolean | Indicates whether the button has a tooltip. | - | false | | isNewTab | boolean | Indicates whether the external URL opened in new tab. | type="link" | true | | iconContent | ReactNode | Icon content to replace buttonText value. | subVariant="icon" | - | | startContent | ReactNode | Additional content to be displayed at the start of the button. | - | - | | endContent | ReactNode | Additional content to be displayed at the end of the button. | - | - | | loadingContent | ReactNode | Custom loading content to display when the button is in a loading state. | - | spinner | | to | string (required) | The route path to navigate to if the button type is route. | type="route" | - | | href | string (required) | The external URL to navigate to if the button type is link. | type="link" | - |

6.2. Button Event(s)

| Attribute | Type | Description | | --------- | ------------------------------ | --------------------------------------------------------------- | | onClick | MouseEventHandler (required) | Event handler function to be called when the button is clicked. |

7. Contributing

Contributions are welcome! If you have any improvements, bug fixes, or features, feel free to open an issue or create a pull request on GitHub.

8. License

This project is licensed under the MIT License - see the LICENSE file for details.