Package Exports

@ibrahimstudio/button
@ibrahimstudio/button/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ibrahimstudio/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@ibrahimstudio/button

This package provides a customizable button component for React applications. | Component by Ibrahim Space Studio, Design by Ibrahim Design Studio.

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.