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|