Button Node

Buttons are clickable elements of your application, analogous to the HTML button tag.

Buttons can be clicked using a mouse or assistive device. When clicked, buttons will trigger their click event.

A button is disabled when Enabled is set to false. When disabled, buttons will not trigger their click events and a disabled cursor will be shown on hover.

Properties

Prop	`buttonNode.isVisible`
Type	`boolean`
Default	`{{true}}`

Prop	`buttonNode.isEnabled`
Type	`boolean`
Default	`{{true}}`

Tooltip

Prop	`buttonNode.tooltip`
Type	`string`
Default	`undefined`

The tooltip text to display when hovered or focused over this node.

Top

Prop	`buttonNode.top`
Type	`string`
Default	`1`

The position of the node from the top side of the grid (grid-row-start).

Left

Prop	`buttonNode.left`
Type	`string`
Default	`1`

The position of the node from the left side of the grid (grid-column-start).

Width

Prop	`buttonNode.width`
Type	`string`
Default	`128px`

The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width must be specified using CSS units (e.g. 100px or 100%).

Min Width

Prop	`buttonNode.minWidth`
Type	`string`
Default	`none`

The minimum width of the node. When this node is in a grid layout, this property is ignored.

Max Width

Prop	`buttonNode.maxWidth`
Type	`string`
Default	`none`

The maximum width of the node. When this node is in a grid layout, this property is ignored.

Height

Prop	`buttonNode.height`
Type	`string`
Default	`32px`

The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height must be specified using CSS units (e.g. 100px or 100%).

Min Height

Prop	`buttonNode.minHeight`
Type	`string`
Default	`none`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Max Height

Prop	`buttonNode.maxHeight`
Type	`string`
Default	`none`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Overflow

Prop	`buttonNode.overflow`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.

Overflow X

Prop	`buttonNode.overflowX`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal axis for content that is larger than its container.

Overflow Y

Prop	`buttonNode.overflowY`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the vertical axis for content that is larger than its container.

Custom Styles

Prop	`buttonNode.styles`
Type	`string`
Default	`element.styles { }`

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Text

Prop	`buttonNode.text`
Type	`string`
Default	`Button`

The text to display in the button's label.

Left Icon

Prop	`buttonNode.leftIcon`
Type	`string`
Default	`undefined`

The icon to display on the left side of the button.

Right Icon

Prop	`buttonNode.rightIcon`
Type	`string`
Default	`undefined`

The icon to display on the right side of the button.

Text Color

Prop	`buttonNode.textColor`
Type	`string`
Default	`white`

The text color of the button's label.

Prop	`buttonNode.fontSize`
Type	`FontSize ('xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl')`
Default	`sm`

Border Radius

Prop	`buttonNode.borderRadius`
Type	`string`
Default	`6px`

The radius of the rounded corners of button's border (perimeter). Supports the same values as the corresponding CSS property.

Padding

Prop	`buttonNode.padding`
Type	`string`
Default	`4px`

The interior padding of the button.

Background Color

Prop	`buttonNode.backgroundColor`
Type	`string`
Default	`purple.700`

The background color of the button.

Hover Background Color

Prop	`buttonNode.hoverBackgroundColor`
Type	`string`
Default	`undefined`

The background color of the button when it is hovered over or focused.

Type

Prop	`buttonNode.type`
Type	`FormButtonTypes ('submit' \| 'reset' \| 'auto')`
Default	`auto`

The HTML type value for the input element.

Event Handlers

On Click

Handler	`buttonNode.onClick`

Called when the user clicks the button. Use this event to trigger downstream actions when this button is clicked.