Button

Buttons trigger an action in a web page. It allows the developer to handle an action on user interaction.

Preview

Usage

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

npm i react-hartan

import { Button } from "react-hartan"

function App() {

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

export default App

Customization With Props

• buttonText -> Accepts a node/string type, 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.

Default

import { Button } from "react-hartan"

function App() {

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

export default App

With Custom Props

Component Code

This is the code for the Button component.

Button.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
};

Button.module.css