BNNVARA Buttons

Buttons allow users to take actions, and make choices, with a single tap. There are two type of buttons that can be used, one basic button in various colors and a button with an icon in various colors. For examples please visit the demo.

Demo Patterns library

Installation

npm install @bnnvara/buttons

Basic usage

Import

import the basic button : import { BaseButton } from '../packages/buttons/src';

import the icon button : import { IconButton } from '../packages/buttons/src';

React The basic version of the button is called like this:

<BaseButton
  variant="red"
  value="value"
  type="button"
  onClick={clickHandler}
>Button</BaseButton

See the proptypes below for all possible proptypes.

Variants

Base Button

This is the most used variant of the button. This button can be used in two sizes: large and small. For the default version is no extra code necessary, for the small one you can write code like this:

<BaseButton
  variant="red"
  type="button"
  size="small"
  handleClick={clickHandler}
></BaseButton>

Disabled

To make a button disabled use the following code:

<BaseButton
  variant="red"
  type="button"
  disabled
  onClick={clickHandler}
>Button</Button

Props

Name	Type	Description	Required
Variant	String	Prop to set the color of the button. Possible options are: 'red', 'white', 'black', 'outline'.	Required
Size	String	Set the size of the button. Possible options are: 'large', 'small'.	Not required
children	String	Set the text in the button.	Required
Type	String	Set the type of the button. Possible options are: 'link', button', 'reset', 'submit'	Required
disabled	Boolean	Set the button to disabled. Possible options are: 'true', ''.	Not required
onClick	Function	Set a function to the button.	Required