Button Component

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	`isVisible`
Type	`boolean`
Default	`true`

Whether or not this node is visible.

Enabled

Prop	`isEnabled`
Type	`boolean`
Default	`true`

Whether or not this node is enabled.

Tooltip

Prop	`tooltip`
Type	`string`
Default	`undefined`

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

Top

Prop	`top`
Type	`number`
Default	`1`

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

Left

Prop	`left`
Type	`number`
Default	`1`

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

Width

Prop	`width`
Type	`string`
Default	`136px`

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 can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Width

Prop	`minWidth`
Type	`string`
Default	`undefined`

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

Max Width

Prop	`maxWidth`
Type	`string`
Default	`undefined`

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

Height

Prop	`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 can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Height

Prop	`minHeight`
Type	`string`
Default	`undefined`

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

Max Height

Prop	`maxHeight`
Type	`string`
Default	`undefined`

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

Overflow

Prop	`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	`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	`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	`styles`
Type	`string`
Default	`::component { }`

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

Object Fit

Prop	`objectFit`
Type	`ObjectFit ('none' \| 'contain' \| 'cover' \| 'fill' \| 'scale-down')`
Default	`cover`

The strategy used to set how the content of a replaced element should be resized to fit its container.

Text

Prop	`text`
Type	`string`
Default	`Button`

The text to display in the button's label.

Left Icon

Prop	`leftIcon`
Type	`string`
Default	`undefined`

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

Right Icon

Prop	`rightIcon`
Type	`string`
Default	`undefined`

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

Text Color

Prop	`textColor`
Type	`string`
Default	`undefined`

The text color of the button's label.

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

Text Hover Decoration

Prop	`textHoverDecoration`
Type	`string`
Default	`underline`

The text decoration that is applied upon hover

Border Color

Prop	`borderColor`
Type	`string`
Default	`undefined`

The border color of the button.

Border Width

Prop	`borderWidth`
Type	`string`
Default	`1px`

The border width of the button.

Border Radius

Prop	`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	`padding`
Type	`string`
Default	`4px`

The interior padding of the button.

Background Color

Prop	`backgroundColor`
Type	`string`
Default	`button.background`

The background color of the button.

Hover Background Color

Prop	`hoverBackgroundColor`
Type	`string`
Default	`undefined`

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

Variant

Prop	`variant`
Type	`Variant ('solid' \| 'ghost' \| 'outline' \| 'link')`
Default	`solid`

The visual style of the button.

Loading

Prop	`isLoading`
Type	`boolean`
Default	`false`

The current visual loading state of the button.

Loading Text

Prop	`loadingText`
Type	`string`
Default	`undefined`

The text to display in the button's label when it is in a loading state.

Spinner Placement

Prop	`spinnerPlacement`
Type	`SpinnerPlacement ('start' \| 'end')`
Default	`start`

The placement of the spinner relative to the label when it is in a loading state.

Type

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

The HTML type value for the input element.

Distribute Content

Prop	`distributeContent`
Type	`NodeLayoutDistributeStyle ('start' \| 'center' \| 'end' \| 'around' \| 'between' \| 'even')`
Default	`center`

The distribution of the children nodes within the component. Corresponds to the justify-content CSS Flexbox property.

Event Handlers

On Click

Handler	`buttonNode.onClick`

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

On Hover

Handler	`buttonNode.onHover`

Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.

On Leave

Handler	`buttonNode.onLeave`

Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.

On Focus

Handler	`buttonNode.onFocus`

Called when the user focuses the node. Use this event to trigger downstream actions when this node is focused.

On Blur

Handler	`buttonNode.onBlur`

Called when the user blurs the node. Use this event to trigger downstream actions when this node is blurred.

Theme Chart