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:

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

and use it as follows:

<Button buttonText="Click Me!" />

3. Usage of type attribute

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 using default value:

<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:

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

With link type

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

<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:

<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:

<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 :

<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 {
  --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:

<Button buttonText="Register" variant="line" />

Customize Button's radius

You can customize the Button's radius using radius attribute:

<Button buttonText="Register" radius="lg" />

or using "custom" value:

<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:

<Button buttonText="Turn Off" endContent={<PowerIcon />} />

Using icon display:

<Button display="icon" ariaLabel="Log Out" iconContent={<ExitIcon />} />

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 file for details.