Button
Buttons allow for click based interaction with devices.
![Screenshot of component Button Button](/static/fe1fa1f10ad9ef9376f1590b6baaac12/Button-for-table-of-contents-desktop.png)
Usage
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' <Button writer ={state => { state .bright = 255 }}> Set brightness to 255</Button >
A writer that sets the rgb
messageID to a red colour.
<Button writer ={state => { state .rgb = { r : 255, g : 10, b : 10, } }}> Set RGB to red</Button >
A writer that sets the randfloat
messageID to a random float between 0 and 1 each click.
<Button writer ={state => { state .randfloat = Math .random () }}> Send random number</Button >
When calling a hardware callback function, use callback
with the messageID instead of a writer.
<Button callback ="estop" > Disable All</Button >
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](/static/78c8801e2b7f438c3acb0b2c1e256445/Button-with-default-intent-desktop.png)
![Screenshot of component Button with-primary-intent](/static/786e3b2c89e03d19c77a7094cad9eba1/Button-with-primary-intent-desktop.png)
![Screenshot of component Button with-success-intent](/static/1a17cb91a727418176fd56cda4993eb6/Button-with-success-intent-desktop.png)
![Screenshot of component Button with-warning-intent](/static/a5418dd83a45386ab1ef3256e9047f6f/Button-with-warning-intent-desktop.png)
![Screenshot of component Button with-danger-intent](/static/6b1aa4216234ee872f2c75ffd2936c48/Button-with-danger-intent-desktop.png)
<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](/static/7004ee73a241b464df18e61e39f75811/Button-with-minimal-styling-desktop.png)
<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](/static/aac9f2d613f0e074d336ed403ffbad55/Button-with-size-large-desktop.png)
![Screenshot of component Button with-size-default](/static/4d12d6ae145d9d38dbfe1827b7d582bf/Button-with-size-default-desktop.png)
![Screenshot of component Button with-size-small](/static/012c777b6cc28bae0caafe5db9199f59/Button-with-size-small-desktop.png)
<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](/static/9c19260ae1484622a48f3cf1338a4989/Button-with-fill-desktop.png)
<Button >Default Button</Button >
<Button fill >Button with Fill</Button >
Grouping
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](/static/646de740dcb44818ebbe6e354dca4d4a/Button-group-basic-desktop.png)
import { ButtonGroup } from '@blueprintjs/core'import { Button } from '@electricui/components-desktop-blueprint'
<ButtonGroup > <Button intent ="primary">Blue Pill</Button > <Button intent ="warning">Red Pill</Button ></ButtonGroup >
Groups can draw vertically with the vertical
prop.
![Screenshot of component Button group-vertical](/static/e68e5a2d752fe6c2508444b2292aca77/Button-group-vertical-desktop.png)
<ButtonGroup vertical > <Button >Ascend</Button > <Button >Maintain Altitude</Button > <Button >Descend</Button ></ButtonGroup >
Icons
icon
and rightIcon
allow for an Icon
to be integrated inside the Button.
Use either IconNames or the string name.