@bulma-web/button

button

bw-button is an easy customizable button with css custom properties, styling for bulma is included

Usage

installation

npm i -S @bulma-web/button
// or
yarn add -S @bulma-web/button

import '@bulma-web/button'

Example

<bw-button type="is-primary">Button Text</bw-button>

API

Property	Description	Type	Values
type	Type (color) of the button, optional	String	is-white, is-light, is-black, is-dark, is-text, is-primary, is-link, is-info, is-success, is-warning, is-danger
size	Size of the button, optional	String	is-small, is-normal, is-medium, is-large
display	display of the button normal or full-width	String	is-fullwidth
outlined	Set the button to outlined version	Boolean	default false
inverted	Set the button inverted, for use on a colored background	Boolean	dafault false
loading	Set the button to the loading state	Boolean	default false
disabled	Set the button to the disabled state	Boolean	default false
rounded	Make the button rounded	Boolean	default false

Custom CSS Variables for customization

Variable	Description	Type
--button-color	color	color code
--button-background-color	background color	color code
--button-border-color	border color	color code
--button-border-width	border size	color code
--button-padding-vertical	vertical padding	px units
--button-padding-horizontal	horizontal padding	px units
--button-hover-color	color on hover	color code
--button-hover-border-color	border color on hover	color code
--button-focus-color	color in focused state	color code
--button-focus-border-color	border color in focused state	color code
--button-focus-box-shadow-size	shadow size when in focused state	box shadow notation
--button-active-color	color in active state	color code
--button-active-border-color	border color in active state	color code
--button-text-color	text color	color code
--button-text-hover-color	text color on hover	color code
--button-disabled-background-color	background color when disabled	color code
--button-disabled-border-color	border color when disabled	color code
-button-disabled-shadow	disabled shadow	string
--button-disabled-opacity	opacity when disabled	unitless
--button-static-color	static color	color code
--button-static-background-color	static background color	color code
--button-static-border-color	static border color	color code