@ibrahimstudio/tooltip NPM

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