@hdoc/react-button
Simple button components for your React app
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;
}
CSS Classes
.button
The base styles for the button
.button--icon
Stylize the button to fit an icon. Used for <ButtonIcon />
.button--no-shadow
Styles for no shadow variant
.button--small
Styles for small variant
.button--large
Styles for large variant
.button--top-rounded
Styles for top-rounded variant
.button--bottom-rounded
Styles for bottom-rounded variant
.button--left-rounded
Styles for left-rounded variant
.button--right-rounded
Styles for right-rounded variant
.button--full-rounded
Styles for full-rounded variant
.button--outline
Styles for outline variant
.button--text
Styles for text variant
.button--primary
Styles for the primary variant
.button--secondary
Styles for the secondary variant
.button--error
Styles for the error variant
.button--info
Styles for the info variant
.button--warning
Styles for the warning variant
.button--success
Styles for the success variant