@hdoc/react-button NPM

@hdoc/react-button

Simple button components for your React app

Buttons screenshot

Installation

npm install @hdoc/react-button

Usage

import { DeleteIcon, FavoriteIcon } from "third-party-package";
import { Button, ButtonIcon } from "@hdoc/react-button";

function App() {
  return (
    <>
      <Button size="large" color="primary" iconEnd={<DeleteIcon />}>
        Delete
      </Button>
      <ButtonIcon color="danger">
        <FavoriteIcon />
      </ButtonIcon
    </>
  );
}

API

See documentation below for reference to all of the props available for the button components:

General Customization

CSS Custom Properties

You can customize any of the button components by using the following CSS custom properties:

.any-parent-of-button,
.class-to-extend-styles {
  /* NORMAL BUTTON */
  --button-justify-content: flex-start;
  --button-gap: 10px;

  --button-bg: lightgray;
  --button-bg-hover: darkgray;
  --button-bg-disabled: gray;

  --button-text: black;
  --button-text-disabled: gray;

  --button-font-family: "Arial";
  --button-font-size: 1rem;
  --button-font-weight: bold;

  --button-padding: 10px;
  --button-radius: 10px;
  --button-shadow: 0 0 0 1px black;

  /* COLOR VARIANTS: primary | secondary | error | info | warning | success */
  --primary: blue; /* background and outline color */
  --primary-hover: darkblue;
  --primary-text: white;
  --primary-transparent: rgba(0, 0, 255, 0.1);

  /* OUTLINE AND TEXT VARIANTS */
  --button-outline-color: white; /* border and font color */
  --button-outline-bg-hover: black;
}