Back

addButton

JS Py

Hello World

Content:
- Examples
- Properties
- Methods

A button component in mobile UI development is an element that triggers an action when pressed.

btn = ui.addButton( parent, text, options?, width?, height? ) → ui object: Button

In case of Upload, you can specify Multiple to accept multiple files.

Here are the methods available for Button Component

Examples

Example - Button variants

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )
        this.main.setChildMargins( 0.01, 0.01, 0.01, 0.01 )

        // Contained
        this.btn1 = ui.addButton( this.main, "Button", "Contained" )

        // Add a callback handler for onTouch event
        this.btn1.setOnTouch( this.onTouch )

        // Outlined
        this.btn2 = ui.addButton( this.main, "Button", "Outlined" )
        this.btn2.setOnTouch( this.onTouch )

        // Text
        this.btn3 = ui.addButton( this.main, "Button", "Text" )
        this.btn3.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "Button is touch!" )
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )
    main.setChildMargins( 0.01, 0.01, 0.01, 0.01 )

    btn1 = ui.addButton( main, "Button", "Contained" )
    btn1.setOnTouch( onTouch )

    btn2 = ui.addButton( main, "Button", "Outlined" )
    btn2.setOnTouch( onTouch )

    btn3 = ui.addButton( main, "Button", "Text" )
    btn3.setOnTouch( onTouch )

def onTouch(event):
    ui.showPopup( "Button is touch!" )

Copy All Run

Example - Button theme colors

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
        this.main.setChildMargins(0.01, 0.01, 0.01, 0.01)

        // Add primary button to the main layout
        this.btn1 = ui.addButton(this.main, "Primary", "Contained,Primary")

        // Add a callback handler for onTouch event
        this.btn1.setOnTouch( this.onTouch )

        // Add secondary button to the main layout
        this.btn2 = ui.addButton(this.main, "Secondary", "Outlined,Secondary")
        this.btn2.setOnTouch( this.onTouch )

        // Add default button to the main layout
        this.btn3 = ui.addButton(this.main, "Default", "Text,Default")
        this.btn3.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        ui.showPopup( "Button is touch!" )
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0.01, 0.01, 0.01, 0.01)

    btn1 = ui.addButton(main, "Primary", "Contained,Primary")
    btn1.setOnTouch( onTouch )

    btn2 = ui.addButton(main, "Secondary", "Outlined,Secondary")
    btn2.setOnTouch( onTouch )

    btn3 = ui.addButton(main, "Default", "Text,Default")
    btn3.setOnTouch( onTouch )

def onTouch(event):
    ui.showPopup( "Button is touch!" )

Copy All Run

Example - Button sizes

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
        this.main.setChildMargins(0.01, 0.01, 0.01, 0.01)

        // Add a small size button to the main layout
        this.btn1 = ui.addButton(this.main, "Small", "Contained,Primary,Small")

        // Add a callback handler for onTouch event
        this.btn1.setOnTouch( this.onTouch )

        // Add a medium/default size button to the main layout
        this.btn2 = ui.addButton(this.main, "Medium", "Contained,Primary,Medium")

        // Add a large size button to the main layout
        this.btn3 = ui.addButton(this.main, "Large", "Contained,Primary,Large")
    }

    onTouch()
    {
        ui.showPopup( "Button is touch!" )
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0.01, 0.01, 0.01, 0.01)

    btn1 = ui.addButton(main, "Small", "Contained,Primary,Small")
    btn1.setOnTouch( onTouch )

    btn2 = ui.addButton(main, "Medium", "Contained,Primary,Medium")

    btn3 = ui.addButton(main, "Large", "Contained,Primary,Large")

def onTouch(event):
    ui.showPopup( "Button is touch!" )

Copy All Run

Example - Button tooltips

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
        this.main.setChildMargins(0, 0.05, 0, 0.05)

        // Add a button to the main layout
        // and add a tooltip to the left of the button
        this.btn1 = ui.addButton(this.main, "Left", "Contained,Primary")
        this.btn1.setToolTip("Tooltip on the left", "left")

        // Add a button to the main layout
        // and add a tooltip to the top of the button
        this.btn2 = ui.addButton(this.main, "Top", "Contained,Primary")
        this.btn2.setToolTip("Tooltip on the top", "top")

        // // Add a button to the main layout
        // and add a tooltip to the right of the button
        this.btn3 = ui.addButton(this.main, "Right", "Contained,Primary")
        this.btn3.setToolTip("Tooltip on the right", "right")

        // // Add a button to the main layout
        // and add a tooltip to the bottom of the button
        this.btn4 = ui.addButton(this.main, "Bottom", "Contained,Primary")
        this.btn4.setToolTip("Tooltip on the bottom", "bottom")
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0, 0.05, 0, 0.05)

    btn1 = ui.addButton(main, "Left", "Contained,Primary")
    btn1.setToolTip("Tooltip on the left", "left")

    btn2 = ui.addButton(main, "Top", "Contained,Primary")
    btn2.setToolTip("Tooltip on the top", "top")

    btn3 = ui.addButton(main, "Right", "Contained,Primary")
    btn3.setToolTip("Tooltip on the right", "right")

    btn4 = ui.addButton(main, "Bottom", "Contained,Primary")
    btn4.setToolTip("Tooltip on the bottom", "bottom")

Copy All Run

Example - Button with icons

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )
        this.main.setChildMargins("12px", "12px", "12px", "12px")

        // Add a primary contained button and
        // set its leading icon to `send`
        this.btn1 = ui.addButton(this.main, "Send", "Primary")
        this.btn1.icon = "send"

        // Add a secondary contained button and
        // set its leading icon to `shopping_cart`
        this.btn2 = ui.addButton(this.main, "Add to cart", "Secondary")
        this.btn2.icon = "shopping_cart"

        // Add an `android` primary icon button to the main layout
        this.btn3 = ui.addButton(this.main, "android", "Primary,Icon")

        // Add a `settings` secondary icon button to the main layout
        this.btn4 = ui.addButton(this.main, "settings", "Secondary,Icon")
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout( "main", "Linear", "VCenter", 1, 1 )
    main.setChildMargins("12px", "12px", "12px", "12px")

    btn1 = ui.addButton(main, "Send", "Primary")
    btn1.icon = "send"

    btn2 = ui.addButton(main, "Add to cart", "Secondary")
    btn2.icon = "shopping_cart"

    btn3 = ui.addButton(main, "android", "Primary,Icon")

    btn4 = ui.addButton(main, "settings", "Secondary,Icon")

Copy All Run

Example - Buttons with badges

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
        this.main.setChildMargins(0.01, 0.01, 0.01, 0.01)

        // Add an android icon button to the main layout
        this.btn1 = ui.addButton(this.main, "android", "Primary,Icon")

        // Add a setting icon button to the main layout and
        // set the badge to `5`
        this.btn2 = ui.addButton(this.main, "settings", "Primary,Icon")
        this.btn2.setBadge( 5 )

        // Add a contained button to the main layout and
        // set the badge to `New` with a `Primary` background color
        this.btn3 = ui.addButton(this.main, "With Badge", "Secondary,Outlined")
        this.btn3.setBadge("New", "Primary")
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)
    main.setChildMargins(0.01, 0.01, 0.01, 0.01)

    btn1 = ui.addButton(main, "android", "Primary,Icon")

    btn2 = ui.addButton(main, "settings", "Primary,Icon")
    btn2.setBadge( 5 )

    btn3 = ui.addButton(main, "With Badge", "Secondary,Outlined")
    btn3.setBadge("New", "Primary")

Copy All Run

Example - Upload button

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Add a primary upload button with upload icon
        this.btn = ui.addButton(this.main, "Upload File", "Primary,Upload")
        this.btn.icon = "backup"

        // Add a callback handler for `onFileSelect` event
        this.btn.setOnFileSelect( this.onFileSelect )
    }

    onFileSelect( files )
    {
        // Get the first file and display its file name
        const file = files[ 0 ]
        ui.showPopup( `${file.name} is selected.` )
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

    btn = ui.addButton(main, "Upload File", "Primary,Upload")
    btn.icon = "backup"

def onFileSelect(files):
    file = files[0]
    ui.showPopup( f"{file.name} is selected." )

Copy All Run

Example - Toggleable Buttons

class Main extends App {
    onStart() {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY");

        // Add margins to children
        this.main.childMargins = "0.5rem";

        // Add contained buttons with theme color and "Toggle" option
        this.btn = ui.addButton(this.main, "Button", "Toggle,Active");
        this.btn = ui.addButton(this.main, "Button", "Primary,Toggle,Active");
        this.btn = ui.addButton(this.main, "Button", "Secondary,Toggle,Active");

        // Add outlined buttons with theme color and "Toggle" option
        this.btn = ui.addButton(this.main, "Button", "Outlined,Toggle,Active");
        this.btn = ui.addButton(this.main, "Button", "Outlined,Primary,Toggle,Active");
        this.btn = ui.addButton(this.main, "Button", "Outlined,Secondary,Toggle,Active");

        // Add text buttons with theme color and "Toggle" option
        this.btn = ui.addButton(this.main, "Button", "Text,Toggle,Active");
        this.btn = ui.addButton(this.main, "Button", "Text,Primary,Toggle,Active");
        this.btn = ui.addButton(this.main, "Button", "Text,Secondary,Toggle,Active");

        // Add a callback handler when all the buttons are click
        this.main.children.map(m => m.setOnTouch( this.onTouch ));
    }

    onTouch( value ) {
        ui.showPopup( ""+value );
    }
}

class Main extends App
    onStart()
        # Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Add margins to children
        this.main.childMargins = "0.5rem"

        # Add contained buttons with theme color and "Toggle" option
        this.btn = ui.addButton(this.main, "Button", "Toggle,Active")
        this.btn = ui.addButton(this.main, "Button", "Primary,Toggle,Active")
        this.btn = ui.addButton(this.main, "Button", "Secondary,Toggle,Active")

        # Add outlined buttons with theme color and "Toggle" option
        this.btn = ui.addButton(this.main, "Button", "Outlined,Toggle,Active")
        this.btn = ui.addButton(this.main, "Button", "Outlined,Primary,Toggle,Active")
        this.btn = ui.addButton(this.main, "Button", "Outlined,Secondary,Toggle,Active")

        # Add text buttons with theme color and "Toggle" option
        this.btn = ui.addButton(this.main, "Button", "Text,Toggle,Active")
        this.btn = ui.addButton(this.main, "Button", "Text,Primary,Toggle,Active")
        this.btn = ui.addButton(this.main, "Button", "Text,Secondary,Toggle,Active")

        # Add a callback handler when all the buttons are click
        this.main.children.map(m => m.setOnTouch( this.onTouch ))

    onTouch( value )
        ui.showPopup( ""+value )

Copy All Run

Properties

The following properties are available on the Button object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

acceptedFiles → String

active → Boolean

backColor → String

backImage → String

badge → Number

badgeColor → String

border → Number

borderColor → String

borderStyle → String

color → String

cornerRadius → Number

disabled → Boolean

el → Object

elStyle → String

fontFile → String

height → Number

icon → String

isVisible → Boolean

left → Number

margins → List

opacity → Number

options → String

padding → List

parent → Object

position → Object

rotation → Number

sizeVariant → String

text → String

textColor → String

textSize → Number

toolTip → String

toolTipPosition → String

top → Number

type → String

variant → String

visibility → String

width → Number

Methods

The following methods are available on the Button object:

animate( anim, duration )

bringForward( zIndex )

destroy()

getPosition( options ) → Object

gone()

hide()

sendBackward( zIndex )

setBorder( left?, top?, right?, bottom?, clr?, style? )

setCornerRadius( tl?, tr?, bl?, br?, mode='px' )

setMargins( left?, top?, right?, bottom?, mode? )

setOnContextMenu( callback )

setOnFileSelect( callback )

setOnLongTouch( callback )

setOnTouch( callback )

setPadding( left?, top?, right?, bottom?, mode='px' )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height, mode )

setTextShadow( radius, dx, dy, color )

setToolTip( title, pos='top' )

show()

Number: Fraction of the parent width `[0-1]`.

Number: Fraction of the parent height `[0-1]`.

Number: The time in milliseconds.

Number: The z-index. A negative value behaves like `sendBackward` method.

Number: The z-index. A positve value behaves like `bringForward` method.

Number: Border-left thickness in pixels.

Number: Border-top thickness in pixels.

Number: Border-right thickness in pixels.

Number: Border-bottom thickness in pixels.

Number: Top-left corner radius.

Number: Top-right corner radius.

Number: Bottom-left corner radius.

Number: Bottom-right corner radius.

Number: Left margin. You can also pass string e.g. `12rem`

Number: Top margin. You can also pass string e.g. `12rem`

Number: Right margin. You can also pass string e.g. `12rem`

Number: Bottom margin. You can also pass string e.g. `12rem`

Number: The left padding in pixel.

Number: The top padding in pixels,

Number: The right padding in pixels.

Number: The bottom padding in pixels.

Number: Fraction of the parent width. [0-1]

Number: Fraction of the parent height. [0-1]

Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.

Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.

Number: The radius in pixels

Number: The x-offset in pixels

Number: The y-offset in pixels

String: “The button text or the material icon text.”

String: “A comma separated options.
Variant: `Contained`”, “ `Outlined`”, “ `Text`”, “ `Default`
Theme Color: `Primary`”, “ `Secondary`”, “ `Default`
Sizes: `Small`”, “ `Medium`”, “ `Large`
Toggleable: `Toggle`”, “ `Active`
Utils: `Icon`”, “ `NoRipple`”, “ `Upload`”, “ `Multiple`”

String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”

String: “The mode of the measurements. Values can be `px` or `%`”

String: “Border color in hexadecimal format `#rrggbb`.”

String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”

String: “Unit. Values are `px` `rem` or `%`.”

String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”

String: “Can be `px` `%`”

String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”

String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”

String: “The color in hexadecimal `#rrggbb`”

String: “The text of the tooltip”

String: “Position of the tooltip.
Positions : `top` `left` `right` `bottom` `bottom-end` `bottom-start` `left-end` `left-start` `right-end` `right-start` `top-end` `top-start`”

Object: The layout where to add the button.

Object: The pointer event object.

Object: The position of the touch event.

Object: The position of the touch event. If the button is `toggleable` the first argument pass into the callback function is a `Boolean` value which is the active state of the button toggle.

List: An array of file objects selected.

function( event )

function( files )

function( pos )

btn.absHeight
Returns the absolute height of the control in pixels.

btn.absLeft
Returns the absolute distance of the control from the left in pixels.

btn.absTop
Returns the absolute distance of the control from the top in pixels.

btn.absWidth
Returns the absolute width of the control in pixels.

btn.acceptedFiles
Sets or returns the accepted files for an upload button.

btn.active
Sets or returns the active state if button is toggleable.

btn.animate
Animate the component.

btn.backColor
A hexadecimal color of the form #rrggbb

btn.backImage
The path to your image file.

btn.badge
Sets or returns the badge content. You can pass a string

btn.badgeColor
Sets or returns the color of the badge. Values can be Primary or Secondary

btn.border
Sets or returns the border thickness in pixels.

btn.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb

btn.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

btn.bringForward
Bring this component forward by a given z-index.

btn.color
Sets or returns the theme color of the button. Values can be Default Primary Secondary Inherit

btn.cornerRadius
Sets or returns the corner radius in pixels.

btn.destroy
Destroy the component.

btn.disabled
Sets or returns the disabled state of the control.

btn.el
Returns the html container element for the control.

btn.elStyle
Sets the style of the html container element.

btn.fontFile
Sets or returns the relative path to the font-family use.

btn.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}

btn.gone
Destroy the component.

btn.height
Sets or returns the height of the control as a fraction of the parent control.

btn.hide
Hide the component.

btn.icon
Sets or returns the material icon font use for the leading icon.

btn.isVisible
Returns whether the control is visible or not.

btn.left
Returns the distance of the control from the left.

btn.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.

btn.opacity
Sets or returns the opacity of the control.

btn.options
Sets or returns the options of the control.

btn.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

btn.parent
Returns the parent layout control.

btn.position
Returns the position of the control. The returned object has left top right and bottom props.

btn.rotation
Sets or returns the angle of rotation in degrees.

btn.sendBackward
Bring this component backward by a given z-index.

btn.setBorder
Sets the border line for the component container.

btn.setCornerRadius
Sets the corner radius of the button.

btn.setMargins
Sets the margin of the component.

btn.setOnContextMenu
Adds a callback function on right click.

btn.setOnFileSelect
Sets a callback on file select.

btn.setOnLongTouch
Adds a callback handler when the button is long touch. The touch timer is about 500 milliseconds.

btn.setOnTouch
Adds a callback handler when the button is touch. If the button is toggleable the first argument pass into the callback function is a Boolean value which is the active state of the button toggle.

btn.setPadding
Sets the padding of the button.

btn.setPosition
Sets the position of the component relative to its parent dimensions.

btn.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.

btn.setSize
Sets the size of the component.

btn.setTextShadow
Sets a text-shadow to the button text.

btn.setToolTip
Sets a tooltip when the button is hovered.

btn.show
Show the component.

btn.sizeVariant
Sets or returns the size variant of the button. Values can be small medium or large

btn.text
Sets or returns the button text.

btn.textColor
Sets or returns the color of the text.

btn.textSize
Sets or returns the size of the text within the control.

btn.toolTip
Sets or returns the tooltip text.

btn.toolTipPosition
Sets or returns the tooltip position. Values can be left top right or bottom

btn.top
Returns the distance of the control from the top.

btn.type
Returns the type of the control.

btn.variant
Sets or returns the variant of the button. Values can be Contained Outlined or Text

btn.visibility
Sets or returns the visibility of the control.

btn.width
Sets or returns the width of the control as a fraction of the parent control.