npm package: @ibrahimstudio/button
Description: This package provides a customizable button component for React applications. | Component by Ibrahim Space Studio, Design by Ibrahim Design Studio.
Author: Ibrahim Space Studio
Latest version: 2.0.1

<div align="center">
    <img width="20%" src="https://raw.githubusercontent.com/space-ibrahimstudio/ibrahimstudio/master/public/image/iss-logo.png" alt="@ibrahimstudio/button" />
    <div>
      <h1>@ibrahimstudio/button</h1>
      <p>This package provides a customizable button component for React applications. | Component by <a>Ibrahim Space Studio</a>, Design by <a>Ibrahim Design Studio</a>.</p>
    </div>
</div>

## 1. Installation

You can install this package via npm:

```sh
npm i @ibrahimstudio/button
# or
yarn add @ibrahimstudio/button
```

## 2. Usage

Import the Button component in your React application:

```javascript
import { Button } from "@ibrahimstudio/button";
```

and use it as follows:

```javascript
<Button buttonText="Click Me!" />
```

## 3. Usage of `type` attribute

### With `button` type (default)

Add "button" value to `type` attribute, then implement `onClick` event handler:

```javascript
<Button buttonText="Login Now" type="button" onClick={() => console.log("logged in.")} />
```

or using default value:

```javascript
<Button buttonText="Login Now" onClick={() => console.log("logged in.")} />
```

---

### With `submit` type

Add "submit" value to `type` attribute when the component usage is for `<form>` element:

```jsx
<Button buttonText="Login Now" type="submit" />
```

---

### With `link` type

Add "link" value to `type` attribute, then add target URL in `href` attribute:

```javascript
<Button buttonText="View Content" type="link" href="https://example.com" />
```

It's open in new tab by default. Set value of `isNewTab` prop to `false` to open in current tab instead:

```javascript
<Button buttonText="View Content" type="link" href="https://example.com" isNewtab={false} />
```

## 4. Customizing styles of Button

### 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:

```javascript
<Button buttonText="Register" size="sm" />
```

---

### Customize Button's color

You can add a color value to the `color` and `bgColor` attribute to custom Button's color like this :

```javascript
<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` :

```css
:root {
  --theme-font: "Inter", sans-serif; /* font family */
  --theme-color-base: white; /* text or icon color inside button */
  --theme-color-primary: blue; /* button color */
}
```

---

### Customize Button's variant

You can customize the Button's variant using `variant` attribute:

<!-- <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.625em; margin-bottom: 1.25em;">
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: #3880eb; color: #fdfdfd; border: 0.0625em solid #3880eb;">
    Fill Variant
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: transparent; color: #fdfdfd; border: 0.0625em solid transparent;">
    Hollow Variant
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: transparent; color: #fdfdfd; border: 0.0625em solid #fdfdfd;">
    Line Variant
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: transparent; color: #fdfdfd; border: 0.0625em dashed #fdfdfd;">
    Dashed Variant
  </button>
</div>

Usage: -->

```javascript
<Button buttonText="Register" variant="line" />
```

---

### Customize Button's radius

You can customize the Button's radius using `radius` attribute:

<!-- <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.625em; margin-bottom: 1.25em;">
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0; background-color: #045e83; color: #fdfdfd; border: 0.0625em solid #045e83;">
    Radius: none
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.313em; background-color: #045e83; color: #fdfdfd; border: 0.0625em solid #045e83;">
    Radius: sm
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: #045e83; color: #fdfdfd; border: 0.0625em solid #045e83;">
    Radius: md
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.938em; background-color: #045e83; color: #fdfdfd; border: 0.0625em solid #045e83;">
    Radius: lg
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 999px; background-color: #045e83; color: #fdfdfd; border: 0.0625em solid #045e83;">
    Radius: full
  </button>
  <button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0 0.938em 0 0.938em; background-color: #045e83; color: #fdfdfd; border: 0.0625em solid #045e83;">
    Radius: custom
  </button>
</div>

Usage: -->

```javascript
<Button buttonText="Register" radius="lg" />
```

or using "custom" value:

```javascript
<Button buttonText="Register" radius="0 15px 0 15px" />
```

---

### 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 `display` attribute then implement `iconContent` attribute.

Using `reg` display:

```javascript
<Button buttonText="Turn Off" endContent={<PowerIcon />} />
```

<!-- Result:

<button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: rgba(243, 18, 96, 0.1); color: #f31260; border: 0.0625em solid #f31260; gap: 0.625em; margin-bottom: 1.25em;">
  Turn Off
  <div style="width: 1.25em; height: 1.25em;">
    <svg width="100%" height="100%" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.9131 3.40897C13.9131 2.90696 13.5061 2.5 13.0041 2.5C12.5021 2.5 12.0952 2.90696 12.0952 3.40897V12.4987C12.0952 13.0007 12.5021 13.4076 13.0041 13.4076C13.5061 13.4076 13.9131 13.0007 13.9131 12.4987V3.40897Z" fill="currentColor" />
      <path d="M7.85686 8.26924C8.21178 7.91421 8.21169 7.33868 7.85665 6.98376C7.50162 6.62885 6.92609 6.62894 6.57118 6.98397C5.30026 8.25531 4.43484 9.87494 4.08436 11.6381C3.73387 13.4012 3.91405 15.2287 4.60211 16.8895C5.29018 18.5502 6.45523 19.9697 7.94996 20.9683C9.44468 21.967 11.202 22.5 12.9996 22.5C14.7973 22.5 16.5545 21.967 18.0493 20.9683C19.544 19.9697 20.709 18.5502 21.3971 16.8895C22.0852 15.2287 22.2654 13.4012 21.9149 11.6381C21.5644 9.87494 20.699 8.25531 19.428 6.98397C19.0731 6.62894 18.4976 6.62885 18.1426 6.98376C17.7875 7.33868 17.7874 7.91421 18.1424 8.26924C19.1591 9.28631 19.8514 10.582 20.1318 11.9925C20.4122 13.403 20.2681 14.865 19.7176 16.1936C19.1672 17.5222 18.2351 18.6578 17.0393 19.4567C15.8436 20.2556 14.4377 20.6821 12.9996 20.6821C11.5615 20.6821 10.1557 20.2556 8.95989 19.4567C7.7641 18.6578 6.83206 17.5222 6.28161 16.1936C5.73116 14.865 5.58702 13.403 5.86741 11.9925C6.1478 10.582 6.84013 9.28631 7.85686 8.26924Z" fill="currentColor" />
    </svg>
  </div>
</button> -->

Using `icon` display:

```javascript
<Button display="icon" ariaLabel="Log Out" iconContent={<ExitIcon />} />
```

<!-- Result:

<button style="display: flex; outline: 0; height: 3.125em; font-size: 1em; font-weight: 600; padding: 0 1.25em; box-sizing: border-box; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.625em; background-color: rgba(243, 18, 96, 0.1); color: #f31260; border: 0.0625em solid #f31260; gap: 0.625em; margin-bottom: 1.25em;">
  <div style="width: 1.25em; height: 1.25em;">
    <svg width="100%" height="100%" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.9131 3.40897C13.9131 2.90696 13.5061 2.5 13.0041 2.5C12.5021 2.5 12.0952 2.90696 12.0952 3.40897V12.4987C12.0952 13.0007 12.5021 13.4076 13.0041 13.4076C13.5061 13.4076 13.9131 13.0007 13.9131 12.4987V3.40897Z" fill="currentColor" />
      <path d="M7.85686 8.26924C8.21178 7.91421 8.21169 7.33868 7.85665 6.98376C7.50162 6.62885 6.92609 6.62894 6.57118 6.98397C5.30026 8.25531 4.43484 9.87494 4.08436 11.6381C3.73387 13.4012 3.91405 15.2287 4.60211 16.8895C5.29018 18.5502 6.45523 19.9697 7.94996 20.9683C9.44468 21.967 11.202 22.5 12.9996 22.5C14.7973 22.5 16.5545 21.967 18.0493 20.9683C19.544 19.9697 20.709 18.5502 21.3971 16.8895C22.0852 15.2287 22.2654 13.4012 21.9149 11.6381C21.5644 9.87494 20.699 8.25531 19.428 6.98397C19.0731 6.62894 18.4976 6.62885 18.1426 6.98376C17.7875 7.33868 17.7874 7.91421 18.1424 8.26924C19.1591 9.28631 19.8514 10.582 20.1318 11.9925C20.4122 13.403 20.2681 14.865 19.7176 16.1936C19.1672 17.5222 18.2351 18.6578 17.0393 19.4567C15.8436 20.2556 14.4377 20.6821 12.9996 20.6821C11.5615 20.6821 10.1557 20.2556 8.95989 19.4567C7.7641 18.6578 6.83206 17.5222 6.28161 16.1936C5.73116 14.865 5.58702 13.403 5.86741 11.9925C6.1478 10.582 6.84013 9.28631 7.85686 8.26924Z" fill="currentColor" />
    </svg>
  </div>
</button> -->

## 6. API

### Button Props

| Attribute        | Type                                  | Required | Description                                                              | Depend To           | Default                  |
| ---------------- | ------------------------------------- | -------- | ------------------------------------------------------------------------ | ------------------- | ------------------------ |
| `id`             | `string`                              | Yes      | Specifies the `id` of the button.                                        | -                   | ibrahimstudio-default-id |
| `name`           | `string`                              | -        | Specifies the `name` of the button.                                      | -                   | -                        |
| `action`         | `string`                              | -        | Specifies the `action` of the button.                                    | -                   | -                        |
| `ariaLabel`      | `string`                              | -        | Specifies the `aria-label` of the button.                                | -                   | -                        |
| `type`           | `button` `submit` `reset` `link`      | -        | Specifies the `type` of the button.                                      | -                   | button                   |
| `size`           | `sm` `reg`                            | -        | Specifies the size of the button.                                        | -                   | reg                      |
| `variant`        | `fill` `hollow` `line` `dashed`       | -        | Specifies the visual style variant of the button.                        | -                   | fill                     |
| `display`        | `reg` `icon`                          | -        | Specifies the display of the button, whether regular or icon.            | -                   | reg                      |
| `radius`         | `none` `sm` `md` `lg` `full` `string` | -        | Specifies the `border-radius` of the button.                             | -                   | md                       |
| `color`          | `string`                              | -        | Specifies the text color of the button.                                  | -                   | var(--color-foreground)  |
| `bgColor`        | `string`                              | -        | Specifies the background color of the button.                            | -                   | var(--color-primary)     |
| `buttonText`     | `string`                              | Yes      | The text content of the button.                                          | `display='reg'`     | Click Me!                |
| `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                    |
| `isNewTab`       | `boolean`                             | -        | Indicates whether the external URL opened in new tab.                    | `type='link'`       | true                     |
| `iconContent`    | `ReactNode`                           | -        | Icon content to replace `buttonText` value.                              | `display='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                  |
| `href`           | `string`                              | Yes      | The external URL to navigate to if the button `type` is _link_.          | `type='link'`       | -                        |

---

### Button Event(s)

| Attribute | Type                | Required | Description                                                     | Depend To       |
| --------- | ------------------- | -------- | --------------------------------------------------------------- | --------------- |
| `onClick` | `MouseEventHandler` | Yes      | Event handler function to be called when the button is clicked. | `type='button'` |

## 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](https://github.com/space-ibrahimstudio/ibrahimstudio/blob/master/LICENSE) file for details.