Skip to content
Jux Docs
WelcomeDesignersDevelopers

Button

Button Element
Button thumbnail placed in the elements panel in Jux UI. Click or drag to the canvas to create a local component.

Technical Definition

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

Anatony and Styling

The button element comes pre-loaded with a leading icon, text label and a trailing icon.

You can influence the styling of the children of the button in relation to the button’s state and properties by selecting them in the parent context module.

To hide some of the children in some of the states - use display: none

To change the SVG assets use the ‘asset content’ property

Button Anatomy

Props and States

  1. Interactive state:
    1. Default
    2. Hover
    3. Active
  2. Disabled property
    1. true
    2. false
  3. Hierarchy property (optional):
    1. primary
    2. secondary

Matrix

Button Matrix

Special mechanics

The button does not have any special mechanics apart from the fact that everything inside of the button will trigger the action that the button will be connected to in the code.

Live mode

In live mode you can check the interactive states of the button.