# Button

<figure><img src="https://raw.githubusercontent.com/akkshayTandon/react-hartan/main/images/button.png" alt=""><figcaption><p>Preview</p></figcaption></figure>

### Usage

The button text can be changed, and it uses a onclick prop which is handled internally.

> ```bash
> npm i react-hartan
> ```

```jsx
import { Button } from "react-hartan"

function App() {

  return (
    <>
      <Button></Button>
    </>
  )
}

export default App
```

### Customization With Props

* **`buttonText`** -> Accepts a **node/string** typ&#x65;**,** sent by the user which is shown as the button name.
* **`onClickFunction`** -> Accepts a **function,** written by the user, which handles the logic when the button is clicked.
* `id` -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.
* **`userButtonStyle`** -> Custom styling prop that accepts the classes written by the user, which defines the custom styling for the button component.

{% tabs %}
{% tab title="Default" %}

```jsx
import { Button } from "react-hartan"

function App() {

  return (
    <>
      <Button></Button>
    </>
  )
}

export default App
```

{% endtab %}

{% tab title="With Custom Props" %}
{% code overflow="wrap" %}

```jsx
// App.css
.my-class{
   font-size: 2rem;
   background-color: red;
}

// App.jsx
import { Button } from "react-hartan"
import "./App.css"

function App() {

const btnTxt = "Custom Text";

async function onclick() {

    async function fetchData() {
      const response = await fetch("https://farzi-vichar-api.vercel.app/language/hindi/random");
      const result = await response.json();

      return result;
    }

    const data = await fetchData();
    console.log(data);
  }


  return (
    <>
      <Button buttonText={btnTxt} onClickFunction={onclick} userButtonStyle={"my-class"}></Button>
    </>
  )
}

export default App
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Component Code

This is the code for the Button component.

{% tabs %}
{% tab title="Button.jsx" %}
{% code overflow="wrap" %}

```jsx
import buttonStyles from "./button.module.css"
import PropTypes from "prop-types"

export default function Button({ buttonText = "Hartan", id, userButtonStyle, onClickFunction }) {

    function handleClick(){
        onClickFunction();
    }

    return (
        <button className={`${buttonStyles.generalBtn} ${userButtonStyle}`} onClick={handleClick}>{buttonText}</button>
    )
}

Button.propTypes = {
    buttonText: PropTypes.node,
    id: PropTypes.string,
    userButtonStyle: PropTypes.string,
    onClickFunction: PropTypes.func
};
```

{% endcode %}
{% endtab %}

{% tab title="Button.module.css" %}
{% code overflow="wrap" %}

```css
/* Button CSS Module */

/* Button style on normal state */
.generalBtn{
    outline: none;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: transparent;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    background: #1e90ff;
    color: #ffffff;
    border-radius: 4px;
}

/* Button style on hover */
.generalBtn:hover {
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(30, 144, 255, 1) 0%, rgba(0, 212, 255, 1) 100%);
}

/* Button style when active */
.generalBtn:active {
    transform: translate(0em, 0.2em);
}
```

{% endcode %}
{% endtab %}
{% endtabs %}