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
Visible
Prop | buttonNode.isVisible |
---|---|
Type | boolean |
Default | {{true}} |
Whether or not this node is visible.
Enabled
Prop | buttonNode.isEnabled |
---|---|
Type | boolean |
Default | {{true}} |
Whether or not this node is enabled.
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.
Font Size
Prop | buttonNode.fontSize |
---|---|
Type | FontSize ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl') |
Default | sm |
The font size of the button's label.
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.