Button Component

The <Button> component is a versatile React component that provides various styling and functional options. It supports icons, images, loading states, and different button styles.

Basic Usage

All of the React.CSSProperties are valid prop with the benefit of passing just the number without unit (px are used by default). The library extents the CSS properties and adds all of them with Hover suffix that will take affect only when the component is hovered by the device pointer.

Text Button

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Click me"
         onClick={(event) => {
            console.log("Button was clicked. Event:", event);
         }}
      />
   );
}

Icon Button

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Icon Button"
         icon="XMark"
         onClick={(event) => {
            console.log("Button was clicked. Event:", event);
         }}
      />
   );
}

Image Button

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Image Button"
         image="logo"
         onClick={(event) => {
            console.log("Button was clicked. Event:", event);
         }}
      />
   );
}

Loading Button

import { useState, useEffect } from "react";
import { Button } from "react-better-html";

function App() {
   const [isLoading, setIsLoading] = useState(false)

   useEffect(()=>{
      if (!isLoading) return;

      setTimeout(() => {
         setIsLoading(false);
      }, 2000)
   },[isLoading])

   return (
      <Button
         text="Loading Button"
         isLoading={isLoading}
         onClick={() => setIsLoading(true)}
      />
   );
}

With Hover

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Hover Button"
         backgroundColorHover="#ff0000"
         onClick={(event) => {
            console.log("Button was clicked. Event:", event);
         }}
      />
   );
}

When hovering the component, the background color will change to red.

Common Props

All standard <button> attributes are valid props for this component.

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Click me"
         backgroundColor="#ff0000"
         title="A `click me` button"
         onClick={(event) => {
            console.log("Button was clicked. Event:", event);
         }}
      />
   );
}

Value click

The library provides a new click event called onClickWithValue that is of type (value: Value) => void and is used together with the value prop. The Value type is generic and will automatically inherit the value prop type.

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Click me"
         value={12}
         onClickWithValue={(value) => {
            console.log(value); // Will log to the console "12"
         }}
      />
   );
}

note

Keep in mind that onClick and onClickWithValue will both fire if passed.

Icon

The icon prop allows you to specify an icon to display on the button.

import { Button } from "react-better-html";

function App() {
   return <Button text="Close" icon="XMark" />;
}

There are props to control the icon style:

• icon - the name of the icon of type IconName
• iconPosition - weather to put the icon on the left or on the right side of the text (defaults to left)
• iconColor - the color of the icon (defaults to the color of the text)
• iconSize - the size of the icon (default to the font-side of the text)

Image

The image prop allows you to specify an image to display on the button.

import { Button } from "react-better-html";

function App() {
   return <Button text="react-better-html" image="logo" />;
}

There are props to control the image style:

• image - the name of the image of type AssetName
• imagePosition - weather to put the image on the left or on the right side of the text (defaults to left)
• imageWidth - the width of the image (default to the font-side of the text)
• imageHeight - the height of the image

Loading State

The isLoading prop allows you to display a loading indicator on the button. You can take advantage of the internal component state and pass a loaderName prop. it is controlled by the

isLoading

   import { Button } from "react-better-html";

   function App() {
      return (
         <Button
            text="Loading"
            isLoading
         />
      );
   }

loaderName

   import { Button } from "react-better-html";

   function App() {
      return (
         <Button
            text="Loading"
            loaderName="creatingItem"
         />
      );
   }

The loader with name creatingItem has a value of true and thus the button will render in loading state. You can control the value of the loader from the useLoaderControls hook and if you need only the value of the loader itself you can use useLoader hook.

Disabled State

The disabled prop allows you to disable the button.

import { Button } from "react-better-html";

function App() {
   return (
      <Button
         text="Click me"
         disabled
         onClick={(event) => {
            console.log("Button was clicked. Event:", event);
         }}
      />
   );
}

Subcomponents

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

Button.secondary

This component is styles like a secondary button.

import { Div, Button } from "react-better-html";

function App() {
   return (
      <Div.row gap={10}>
         <Button text="Start now" />
         <Button.secondary text="Reed more" />
      </Div.row>
   );
}

Button.destructive

This component is with a destructive style (red background).

import { Div, Button } from "react-better-html";

function App() {
   return (
      <Div.row gap={10}>
         <Button text="Keep reading" />
         <Button.destructive text="Close" />
      </Div.row>
   );
}

Button.icon

This component is with an icon only and has e a circular chape.

import { Button } from "react-better-html";

function App() {
   return <Button.icon icon="XMark" />;
}

Button.upload

This component triggers a file upload and has an upload icon. It also handles the files with the onUpload prop.

import { Button } from "react-better-html";

function App() {
   return (
      <Button.upload
         text="Pick file"
         onUpload={(files) => {
            console.log("Selected files:", files);
         }}
      />
   );
}