Buttons allow for click based interaction with devices.

Screenshot of component Button Button


To determine what to write to the device, Button's have a writer prop that takes a functional writer.

A writer that sets the bright variable to 255. The contents (children) between the <Button> </Button> tags render inside the button.

import { Button } from '@electricui/components-desktop-blueprint'
writer={state => {
state.bright = 255
Set brightness to 255

A writer that sets the rgb messageID to a red colour.

writer={state => {
state.rgb = {
r: 255,
g: 10,
b: 10,
Set RGB to red

A writer that sets the randfloat messageID to a random float between 0 and 1 each click.

writer={state => {
state.randfloat = Math.random()
Send random number

When calling a hardware callback function, use callback with the messageID instead of a writer.

<Button callback="estop" >
Disable All

Add the noAck boolean prop (or set it to true), to disable automatic acknowledgement when a click has occured.

Intent Colours

The intent of the button allows you to change the colour.

Screenshot of component Button with-default-intent
Screenshot of component Button with-primary-intent
Screenshot of component Button with-success-intent
Screenshot of component Button with-warning-intent
Screenshot of component Button with-danger-intent
<Button intent="success">Button with success intent</Button>

Minimal Styling

Buttons can have minimal styling. Minimal buttons look like text with no frame or styling, on click they look like this:

Screenshot of component Button with-minimal-styling
<Button minimal>Button with minimal styling</Button>

Outline Styling

Buttons also support an outlined style.

<Button outlined>Button with outline styling</Button>

Large and Small, Fills

Control the size of the buttons with the large and small properties.

Screenshot of component Button with-size-large
Screenshot of component Button with-size-default
Screenshot of component Button with-size-small
<Button large>Button with large sizing</Button>
<Button>Button with default sizing</Button>
<Button small>Button with small sizing</Button>

A button will fill it's container with the fill property.

Screenshot of component Button with-fill
<Button>Default Button</Button>
<Button fill>Button with Fill</Button>


Buttons can join to create command palletes or menu-like clusters. Buttons in groups accept the same set of properties applicable to standalone buttons.

Screenshot of component Button group-basic
import { ButtonGroup } from '@blueprintjs/core'
import { Button } from '@electricui/components-desktop-blueprint'
<Button intent="primary">Blue Pill</Button>
<Button intent="warning">Red Pill</Button>

Groups can draw vertically with the vertical prop.

Screenshot of component Button group-vertical
<ButtonGroup vertical>
<Button>Maintain Altitude</Button>


icon and rightIcon allow for an Icon to be integrated inside the Button.

Use either IconNames or the string name.