@chasecoding/nice-buttons v1.0.5

Buttons

BasicButton

This button is what it sounds like, a customizable button at its most basic level. You can pass it unique styling, the text shown, and an onclick function via props. The syntax is as follows:

<BasicButton style={StylePropHere} onclick={ClickFunctionhere} buttonText={ButtonTextPropHere} />

Button

This button is a more styled button, and can be choosen through its type (which uses classes to handle changing the styling). The syntax for this one is as follows:

<Button style={StylePropHere} onclick={ClickFunctionhere} buttonText={ButtonTextPropHere} />

There are multiple types of buttons using this method, you can also add more styling via the style prop as shown above

Button Types -Modern M-Red -Modern M-Blue -Modern M-Green -Modern M-Yellow -Modern M-Orange -Modern M-Pink -Modern M-Brown -Modern M-Purple -Modern M-White -Modern M-Black -Modern M-Gray -Modern M-Cyan

These button types are referencing classes, so you can remove the color, and just use 'Modern' within the type prop and add your own background color and text color to the buttons. Using this fashion will give the developer/designer the most use from these buttons. Make sure to pass these props as strings.

Inverted Button Types -Modern M-White-Inverted -Modern M-Black-Inverted

These button types also are referencing classes, however these when hovered over give an inverted color.

ConnectedButtons

This is going to act as a parent container for the buttons and will allow the buttons to connect together as a horizontal bar. Syntax is as follows:

<ConnectedButtons> <Button style={StylePropHere} onclick={ClickFunctionhere} buttonText={ButtonTextPropHere} /> <Button style={StylePropHere} onclick={ClickFunctionhere} buttonText={ButtonTextPropHere} /> <Button style={StylePropHere} onclick={ClickFunctionhere} buttonText={ButtonTextPropHere} /> </ConnectedButtons>

The buttons will be auto formatted into a nice bar of buttons using this method

OldschoolButton

These buttons are meant to be used in an OldschoolButtonBar so they are interconnected, and act as a toolbar. There is a prop for the icon that will display within the button. You also must set the height and width of the buttons. There is a default color, however that can be overwritten by including the color prop and stating a color, either base (red, blue, etc), or via hex and rgb. There is also a tooltip on these, if you choose to include a True property within a tooltip prop. The tooltip will take the information from the image's alt prop, so if you want to utilize this be sure to use the proper alt information. You can add a tooltip by utilizing the tooltip prop, as well. The syntax is as follows:

<OldschoolButton buttonImage={ButtonImagePropHere} alt='User Account' height={ButtonHeightHere} width={ButtonWidthHere} color={ColorValueHere} />

OldschoolButtonBar

The OldschoolButtonBar is a container for OldschoolButton components. It will format the buttons into a nice toolbar to use within the application. The syntax is as follows:

<OldschoolButtonBar> <OldschoolButton buttonImage={ButtonImagePropHere} alt='User Account' height={ButtonHeightHere} width={ButtonWidthHere} color={ColorValueHere} /> <OldschoolButton buttonImage={ButtonImagePropHere} alt='User Account' height={ButtonHeightHere} width={ButtonWidthHere} color={ColorValueHere} /> <OldschoolButton buttonImage={ButtonImagePropHere} alt='User Account' height={ButtonHeightHere} width={ButtonWidthHere} color={ColorValueHere} /> </OldschoolButtonBar>