Material-UI Color Button

Friendly customizable material-ui color button

Overview

Material-UI buttons are nice-looking, but they feel almost like a template when you interact with them. Material-UI color button, on the other hand, feels friendly and like a native part of aa UI.

Getting Started

Install

npm install mui-color-button

Example

For simplicity, here's example code and output so you can start building right away

Code

<ColorButton
  label={"Woohoo!"}
  textColor={"white"}
  backgroundColor={"red"}
/>

Properties

label: string or React component, the title/body of the button;
textColor: string, representing a color;
backgroundColor: string, representing a color;
fontSize?: number, size of button font;
buttonPadding?: number, vertical padding of button;
buttonPaddingHorizontal?: number, horizontal padding of button;
borderRadius?: number, button corner radius (round colors = friendly);
isBold?: boolean, true if text should be bold;
onClick?: (event: React.MouseEvent) => any, on button click action;
style?: React.CSSProperties, additional custom style to add to the button;
children?: React.ReactNode, unstyled body component of the button;
onHoverProps?: CoreProps, describes how the button on hover;

Quick pointers

• Just try it out, you'll be up and running in 30 seconds